jQuery setInterval在循环回调中延迟执行

Question

我想显示每一个隐藏行，但是行与行之间要间隔3秒。

jQuery.each($('.main-table tbody tr:hidden'),
        function (i, el) {
        setInterval(function(){ 
            $(el).removeClass('hidden');
        }, 3000);
        });

上面的第一次只睡了3秒。

Answer 1

与迭代器相乘，否则它们将在3秒内全部执行，因为每个循环运行并立即完成，它不会等待超时进入循环中的下一个元素。

jQuery.each($('.main-table tbody tr:hidden'), function (i, el) {
    setTimeout(function(){ 
        $(el).removeClass('hidden');
    }, i * 3000);
});

注意，第一次i为零，0*3000 == 0为零，所以没有超时。
如果您需要在第一次迭代时设置超时，请执行(i+1) * 3000

Answer 2

虽然adeneo的答案很有效，但这里有另一个无循环的方法，可能会帮助寻找类似问题解决方案的人:

var intervalID = setInterval(function() {
   var el =$('table tr.hidden:first');
   if(el.length > 0)
       el.removeClass('hidden');
   else
       clearInterval(intervalID); // stop timer if no elements left
}, 3000);

http://jsfiddle.net/gd6gn/

Answer 3

你可以(也应该)利用jQuery的动画框架来做到这一点。

var tbody = $('.main-table tbody');
tbody.find('tr:hidden').each(function(i, tr) {
    tbody.delay(3000)
    .queue(function(dequeue) {
        $(tr).removeClass('hidden');
        dequeue();
    });
});

http://jsfiddle.net/b9chris/54u154hc/

它通过利用框架中的现有代码来避免乘法来为你清理，并且它避免了这里的其他答案都有一个bug，他们在循环中使用setInterval来做setTimeout应该做的事情。setInterval和setTimeout都在较新的浏览器中引入了一个错误，如果标签被暂停以节省浏览器的CPU，那么序列将暂停，然后立即向前激增。这避免了动画的不和谐。