JS 为什么循环不保持相同的间隔时间？答案

【问题标题】：JS Why the loop don't keep the same interval time?JS 为什么循环不保持相同的间隔时间？
【发布时间】：2023-04-03 23:22:01
【问题描述】：

我做了一个小滑块来循环 3 个图像，我希望每个图像停止 3 秒，然后淡出和淡入下一个，但问题是：
第一个可以停留3秒，但是一旦开始循环，就不会再停3秒了，画面立马变了，为什么不能保持3秒的停留？
这是Demo

var i = 0;
var name = ['Cat', 'Dog', 'Duck'];

function next() {
  if (i > 1) {
    i = 0;
  } else {
    i++;
  };
  $('#loop').fadeOut(1000, function() {
    $(this).css('background', 'url("' + i + '.png")').fadeIn(1000);
    $('h1').html(name[i]);
  });
};
setInterval(next, 3000);

#loop {
  width: 300px;
  height: 300px;
  background: url('0.png');
}
h1 {
  padding-top: 310px;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loop">
  <h1>Cat</h1>
</div>

【问题讨论】：

我在 Firefox 上试用了你的演示，效果很好。您在哪个浏览器中遇到问题？
感觉第一张图片后，每张图片都不会停留3秒
啊，我明白了，从fadeIn() 开始，图像将出现3 秒，因此fadeIn 和fadeOut 时间是在这3 秒内计算的。由于您的过渡持续 1 秒，因此图像只剩下 1 秒。将间隔时间增加到 5 秒，在 setInterval 之前放 setTimeout(next, 3000);
我试试你的想法，添加“setTimeout(next, 3000);”在“setInterval(next, 5000);”之前，但是第二张图片停留不到1秒，那么另一张很好，为什么第二张不能停留3秒？
最好的办法是使用 promise：stackoverflow.com/a/27660144/1414562

标签： javascript jquery html css

【解决方案1】：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Loop</title>
    <style type="text/css">
        #loop{
            width: 300px;
            height: 300px;
            background: url('0.png');
        }
        h1{
            padding-top: 310px;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="loop">
    <h1>Cat</h1>
</div>


<script src="https://code.jquery.com/jquery-3.0.0.min.js"
        integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0="
        crossorigin="anonymous">
</script>
<script>
    $(function (){
        var i = 0;
        var name = ['Cat', 'Dog', 'Duck'];

        var timerId = setTimeout(next, 3000);
        function next(){
            if (i > 1) {
                i = 0;
            }else{
                i++;
            };
            $('#loop').fadeOut(1000, function (){
                $(this).css('background', 'url("'+ i +'.png")').fadeIn(1000);
                $('h1').html(name[i]);
                timerId = setTimeout(next, 3000);
            });
        };

    });
</script>
</body>


</html>

【讨论】：

我试试你的代码，加了setTimeout，但是图片没有按顺序显示，而且速度更快，每张图片都不能停留1秒，不知道为什么?
我发布了所有代码，它尊重我认为的顺序 1. 猫 2. 狗 3. 鸭子。希望修改后的版本对你有帮助
是的，它有效，这是基于我的代码的最佳解决方案，谢谢，但有一件事我不明白，为什么这只能添加一个 var "setTimeout" 并再次调用它在函数中，你能解释一下吗？
您好，我向您推荐 John Resig（jQuery 创建者）ejohn.org/blog/how-javascript-timers-work987654321@的下一篇文章
我现在看到了，setTimeout在延迟之后执行一个函数，然后把这个延迟放到函数中自己重新执行，这简直是一门艺术！！

【解决方案2】：

你可以使用.queue()，.delay()，.promise()，递归

$(function() {

var names = ['Cat', 'Dog', 'Duck'];

var images = ["http://placehold.it/300x300?text=Cat"
             , "http://placehold.it/300x300?text=Dog"
             , "http://placehold.it/300x300?text=Duck"]

function next() {
  return $("#loop")
    .queue("names", $.map(names, function(name, i) {
      return function(next) {
        $(this).css("background", "url(" + images[i] + ")")
        .find("h1").html(name).end()
        .fadeIn(1000, function() {
          $(this).delay(3000)
          .fadeOut(1000).promise().then(next)
        })
      }
    }))
    .dequeue("names").promise("names").then(next)
};

next();

})

#loop {
  width: 300px;
  height: 300px;
  background-repeat:no-repeat;
}
h1 {
  padding-top: 310px;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loop">
  <h1>Cat</h1>
</div>

【讨论】：

这个解决方案效果很好，看起来比较复杂，不过还是谢谢你的建议。