具有延迟的奇怪循环行为 (jQuery)

Question

我在 jQuery 中构建了一个简单的循环，但“价格”随机弹出。我认为延迟有一些问题，但我希望它停留 4-5 秒。

setInterval(function(){loop()}, 16000);
 
function loop(){
  $('.popup').fadeIn('1000');
    $('.twitchad').animate({
    left: "-100px"
  }, 1500, function() {
    $('.price').show().animate({
          left: 50
      }).delay('4000').fadeOut("slow");
    $('.popup').delay('5000').fadeOut("slow");
  });
}

Answer 1

如果添加计数，您可以更清楚地看到发生了什么：

var now = Date.now();

function secondsCount(){
  return Math.floor((Date.now() - now)/1000);
}

setInterval(function(){
  console.log("Loop", secondsCount());
  loop();
}, 10000);
 
function loop(){
  console.log("Trigger FadeIn", secondsCount());
  $('.popup').fadeIn('1000');
  console.log("Trigger Animate Left", secondsCount());
    $('.twitchad').animate({
    left: "-100px"
  }, 1500, function() {
    console.log("Trigger Fadeout", secondsCount());
    $('.popup').delay('5000').fadeOut("slow", function(){
      console.log("Complete", secondsCount());
    });
  });
}

在控制台中，我看到以下内容。

Loop 10 
Trigger FadeIn 10 
Trigger Animate Left 10 
Trigger Fadeout 11 
Complete 17 
Loop 20 
Trigger FadeIn 20 
Trigger Animate Left 20 
Trigger Fadeout 21 
Complete 27 
Loop 30 
Trigger FadeIn 30 
Trigger Animate Left 30 
Trigger Fadeout 31
Complete 37

它正在循环并以适当的周期触发所有内容，但我怀疑在第一个运行之后，它并不处于您期望的确切状态。不清楚您的期望或您从 post 中看到的错误。希望这可以帮助您到达那里。如果没有，请使用可能有助于解释的详细信息或屏幕截图更新您的 post。

具有延迟的奇怪循环行为 (jQuery)

Strange Loop behaviour with delays (jQuery)

jquery

loops

jquery-ui

jquery-animate

delay