jquery - 以两秒的间隔附加每个元素

Question

我有一个包含一堆项目的 HTML 代码的变量。我想以两秒的间隔附加所有这些项目。我在下面编写的代码一次附加了所有项目。我不明白为什么它会这样做，setTimeout()因为each().

var myVar = "<div class='item'>Item01</div>" +
            "<div class='item'>Item02</div>" +
            "<div class='item'>Item03</div>";

$(myVar).each( function() {
    var value = $(this);
    setTimeout( function {
        $('.item-list').append(value);
    }, 2000);
}

Answer 1

尝试这个：

var myVar = "<div class='item'>Item01</div>" +
            "<div class='item'>Item02</div>" +
            "<div class='item'>Item03</div>";

$(myVar).each( function(index) {
    var value = $(this);
    setTimeout( function() {
        $('.item-list').append(value);
    }, 2000 * (index + 1));
};

解释

在您的原始代码中，循环发生得非常快。让我们假设循环的每次迭代需要 1 毫秒。这意味着第一项在 2001 毫秒后添加，第二项在 2002 毫秒后添加，第三项在 2003 毫秒后添加。

通过获取数组中项的索引，我们可以在 2000 毫秒后添加第一项，在 4000 毫秒后添加第二项，以此类推。

更新：修正语法错误。