带有延迟的奇怪循环行为（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

它正在以适当的周期循环并触发所有内容，但我怀疑在第一次运行后，它并没有处于您期望的确切状态。目前尚不清楚您的期望是什么，也不清楚您从帖子中看到了什么错误。希望这可以帮助您实现这一目标。如果没有，请使用可能有助于解释的详细信息或屏幕截图更新您的帖子。