Функция setInterval не всегда работает так, как задумано - PullRequest
Новая
       7

Функция setInterval не всегда работает так, как задумано

1 голос
/ 29 марта 2020

Итак, я попытался создать анимированный баннер (содержащий два изображения: # baner1 и # baner2. Когда одно исчезает, второе исчезает). В большинстве случаев он работает правильно, но иногда эти изображения быстро меняются (примерно одна секунда за другой, несмотря на то, что таймер составляет 12000 миллисекунд). Любая идея, что вызывает это?

Мой код: 

setInterval(()=>{
  $('#baner1').fadeOut(2000);
  $('#baner2').fadeIn(2000);
},12000)

setInterval(()=>{
  $('#baner1').fadeIn(2000);
  $('#baner2').fadeOut(2000);
},24000)

Кроме того, это (насколько я знаю) мой единственный код, влияющий на эти изображения. Заранее спасибо за помощь.

1 Ответ

1 голос
/ 29 марта 2020

Ваши обратные вызовы перекрываются.

Они go как a, a+b, a, a+b ...

Иногда выполняется a+b как b+a (потому что два setInterval не синхронизированы идеально), и я думаю, что это вызывает у вас проблемы.

То, что вы хотели сделать, это a, b, a , b ...

Вы можете попробовать изменить свою логику c, чтобы использовать одну setInterval, и использовать переменную, чтобы узнать, является ли это a "поворот" или b "очередь". Примерно так: 

let nextTurn = 'a';
setInterval(()=>{
    if (nextTurn === 'a') {
        $('#baner1').fadeOut(2000);
        $('#baner2').fadeIn(2000);
        nextTurn = 'b';
    } else {
        $('#baner1').fadeIn(2000);
        $('#baner2').fadeOut(2000);
        nextTurn = 'a';
    }
},12000)
...