setInterval 函数并不总是按预期工作

Question

所以，我尝试制作一个动画横幅（包含两个图像 - #baner1 和 #baner2。当一个淡出时，第二个淡入）。它在大多数情况下都可以正常工作，但有时这些图像会迅速变化（就像一个接一个，尽管计时器是 12000 毫秒）。知道是什么原因造成的吗？

我的代码：

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

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

此外，这是（据我所知）影响这些图像的唯一代码。在此先感谢您的帮助。

Answer 1

您的回调重叠。

他们像 a、a+b、a、a+b...

a+b 有时会作为 b+a 执行（因为两个 setInterval 没有完全同步），我认为这就是给您带来麻烦的原因。

你的意思是a、b、a、b...

您可以尝试更改您的逻辑以使用单个 setInterval，并使用变量来了解它是 a "turn" 还是 b "turn".像这样：

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)

setInterval 函数并不总是按预期工作

setInterval function not always working as intended

html

javascript

jquery

setinterval