javascript — 2 setTimeouts не очищаются правильно — Как правильно сбросить?

2 setTimeouts не очищается правильно — Как правильно сбросить?

Вы получите некоторые странные взаимодействия между таймаутами, например

  1. При запуске таймеры будут установлены на 5 и 8 секунд
  2. Через 5 секунд:
    1. будет показан logo1
    2. логотип 2 будет скрыт
    3. функция запустится через 5 секунд
  3. В 8 секунд:
    1. будет показан логотип 2
    2. логотип 1 будет скрыт
    3. функция настроена на повторный запуск через 8 секунд
  4. Через 10 секунд первая функция запускается снова, поэтому отображается логотип 1
  5. Через 15 секунд первая функция запускается снова, логотип 1 уже показан
  6. Через 16 секунд вторая функция запускается снова, отображается логотип 2
  7. Через 20 секунд снова запускается первая функция, отображается логотип 1
  8. Через 24 секунды вторая функция запускается снова, отображается логотип 2
  9. Через 25 секунд первая функция запускается снова, отображается логотип 1
  10. Через 30 секунд первая функция запускается снова, логотип 1 уже показан
  11. Через 32 секунды вторая функция запускается снова, отображается логотип 2
  12. и так далее…

Возможно, вы хотите, чтобы логотип 2 отображался в течение 5 секунд, затем логотип 1 в течение 3 секунд, затем логотип 2 в течение 5 секунд и т. Д.

В этом случае вы можете вызывать одну функцию из другой, используя соответствующие настройки для setTimeout . Так как по умолчанию отображаются логотипы, я изменил показ, чтобы скрыть , например,

 let logo1 = document.querySelector('.logo-1'); let logo2 = document.querySelector('.logo-2'); function firstLogo() { console.log('Hiding first logo'); logo1.classList.toggle('hide'); logo2.classList.toggle('hide'); setTimeout(secondLogo, 3000); } function secondLogo() { console.log('Hiding second logo'); logo1.classList.toggle('hide'); logo2.classList.toggle('hide'); setTimeout(firstLogo, 5000); } firstLogo(); 
 .hide { display: none; } 
 {amp}lt;span class="logo-1"{amp}gt;logo 1{amp}lt;/span{amp}gt;{amp}lt;span class="logo-2 hide"{amp}gt;logo 2{amp}lt;/span{amp}gt; 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector