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

Answer 2

setTimeout没有阻止;它会安排超时，然后继续。因此，each()的下一次迭代会立即发生，它会在下一个元素上安排完全相同的时间（等）。

因此，你应该改变你的代码（一种方法），每1000ms运行一次这个函数，将下一个元素添加到backup。

var backup = $('#rGallery li');
var i = 0;
$('#rGallery li').remove();

var interval = setInterval(function () {
    if (i === backup.length) {
        clearInterval(interval);
    } else {
        var the = $(backup).eq(i);

        $('#rGallery').append('<li>'+the.html()+'</li>');
    }

    i++;
}, 1000);

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

2 个答案: