jquery - .each() 没有任何间隔地执行

Question

$(document).ready(function(e) {
    $('.holder').each(function()
    {
        $(this).addClass('dummy');
        setTimeout( function () {
            $('.dummy').children('.box').slideDown('300');
        },2000);
    });
});

<div>我在另一个里面有 n 个<div class='holder'>。所以我想给每个孩子添加一些效果<div>。但问题是<div>支架内的所有孩子都在同时滑下。它似乎不服从setTimeout(). 为什么会发生这种情况？

Answer 1

您需要增加循环间隔，还需要在超时回调中使用 hodler 引用

$(document).ready(function (e) {
    $('.holder').each(function (idx) {
        var $this = $(this).addClass('dummy');
        setTimeout(function () {
            $this.children('.box').slideDown('300');
        }, idx * 2000);
    });
});

Answer 2

each循环大约立即执行，并且您为所有调用提供相同的超时setTimeout。所以它们都在（即时）循环后 2000 毫秒执行。

一个简单的解决方案：

$(document).ready(function(e) {
    $('.holder').each(function(i){
        var $this = $(this);
        $this.addClass('dummy');
        setTimeout( function () {
            $('.box', $this).slideDown('300');
        },2000*(i+1)); // give different timeouts
    });
});

Answer 3

利用

$(document).ready(function (e) {
    $('.holder').each(function (interval) { // interval here is index of each loop
        $(this).addClass('dummy');
        var $this = $(this);
        setTimeout(function () {
            $this.children('.box').slideDown('300');
        }, 2000 * (interval + 1));
    });
});

解释

1st timeOut = 2000=  2000 * (interval + 1)=  2000 * (0+ 1)=  2000 * (1)
2nd timeOut = 4000=  2000 * (interval + 1)=  2000 * (1+ 1)=  2000 * (2)
3rd timeOut = 6000=  2000 * (interval + 1)=  2000 * (2+ 1)=  2000 * (3)

等等