以两秒为间隔追加每个元素

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));
};

说明

在原始代码中，循环非常快。让我们假装循环的每次迭代需要1ms。这意味着第一项是在2001ms之后添加，第二项是2002ms之后，第三项是2003ms之后。

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

更新：修复了语法错误。