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/

它避免了通过利用框架中的现有代码来为你清理它，并避免了一个错误，这里的其他答案都有他们在循环中使用setInterval的地方，做一些setTimeout意味着做。并且setInterval和setTimeout都会在较新的浏览器中引入一个错误，如果该选项卡被挂起以便浏览器保存CPU，那么序列将暂停，然后一次性激增。这可以避免剧烈的动画激增。

jQuery setInterval用于延迟循环回调中的执行

3 个答案: