setTimeout不起作用，其他方法在for循环中排队

setTimeout not working, other methods of queuing in a for loop?

本文关键字：for 循环 排队 方法 不起作用 其他 setTimeout      更新时间：2023-09-26

下面的代码（在我的真实例子中，div是阴影的，我想按顺序将它们的不透明度降低到0，这样每个都会按顺序消失。

我试着在不使用setTimeout的情况下这样做，但所有的div都同时消失了——很高兴知道代码中改变不透明度的部分是有效的，但我似乎无法让它们按顺序工作。

当我尝试使用setTimeout（我认为我实现得不正确）时，什么也没发生！

任何帮助都将不胜感激，我是JavaScript的新手，有一段时间没有接触过它，教程也没能帮助我。

<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4"></div>
        <script type="text/javascript">
    // the divs that we want to cycle through are named here.
    var divs = ["#div1", "#div2", "#div3", "#div4"];
    var divsLength = divs.length;   
        for (var i = 0; i < divsLength; i++) {
            setTimeout(function(){ 
              $(divs[i]).fadeTo(1000, 0, function() {   
              });
            },1500);
        };  
    </script>
</body>

以下是在没有setTimeout:的情况下应该能够做到这一点的方法

function doFade(items, index) {
    $(items[index]).fadeTo(1000, 0, function() {
        doFade(items, index + 1);
    });
}
doFade(divs, 0);

如果你的目标浏览器支持ES5（大多数现代版本都支持），那么你可以进一步简化doFade:

function doFade(items, index) {
    $(items[index]).fadeTo(1000, 0, doFade.bind(this, items, index + 1));
}

工作jsfiddle

您可以使用递归函数来做这种事情，比如：

function seqFade($el){
    $el.first().fadeOut(500, function(){ //Take the first element and fade it out
        seqFade($el.slice(1)); //Recall the function when complete with the same set of element minus the first one.
    })
}
seqFade($('div')); //Call the function

http://jsfiddle.net/L2fvdfy2/

在你的代码中，它可能看起来像这样：

function seqFade($el){
    $el.first().fadeOut(500, function(){
        seqFade($el.slice(1));
    })
}
seqFade($('#div1, #div2, #div3, #div4'));

这是因为当超时最终触发时，变量"i"只有最后一个索引值。此外，循环将几乎同时启动所有超时。

还有其他方法可以实现这一点，但这可能只需要对代码进行最小的更改。

试试这个：

<script type="text/javascript">
    var divs = ["#div1", "#div2", "#div3", "#div4"];
    var divsLength = divs.length;   
        for (var i = 0; i < divsLength; i++) {
            setTimeout((function(index) { 
              return function(){ 
                $(divs[index]).fadeTo(1000, 0, function() { });
              }
            )(i)),1500 + (i * 1500));
        };  
    </script>
</body>

这将在调用函数时创建一个具有自己的索引副本的函数实例。此外，增加每次超时的超时时间将使它们按顺序执行。

试试这个：

// the divs that we want to cycle through are named here.
var divs = ["#div1", "#div2", "#div3", "#div4"];
(function fade(i) {
    $(divs[i]).fadeTo(1000, 0, function() {
        setTimeout(function() {fade(++i);}, 500);
    });
})(0);

    for (var i = 1; i <= divsLength; i++) {
        setTimeout(function(){ 
          $(divs[i]).fadeTo(1000, 0, function() {   
          });
        },1000*i);

让我们试试这个

相关文章：