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 毫秒后添加第二个元素，依此类推。

更新:修复了语法错误。