$ .each中的setTimeout不会尊重时间

Question

我想备份,删除列表中的每个项目,并在1秒后附加每个项目.

我这样想:

var backup = $('#rGallery').html();
$('#rGallery li').remove();
console.log($(backup).filter('li').length); /* it logs like 135 */
$(backup).filter('li').each(function(){
    var the = $(this);
    var timeout = setTimeout(function(){
        console.log(the.html()); /* it logs the html, but all at the same time*/
        $('#rGallery').append('<li>'+the.html()+'</li>');

        /*return*/
    },1000);
});

它的作品,物品被移除然后再追加,问题是它们都在1秒后被追加.而不是每一个从前一个等待1秒.

我在这里错过了什么？

Answer 1

因为你告诉他们所有人都要在一秒钟内运行,所以他们不会被添加到某个魔术队列中并排队等待开始计数.

$(backup).filter('li').each(function(index){  //added index here
    var the = $(this);
    var timeout = setTimeout(function(){
        console.log(the.html()); /* it logs the html, but all at the same time*/
        $('#rGallery').append('<li>'+the.html()+'</li>');

        /*return*/
    },1000*(index+1)); //multiplied it here
});