Jquery:无限循环和暂停

Question

我有这个代码

var timeout = 0;
 $('#container td').each(function(){
   var td = this;
   setTimeout(function() {
     var new_text = $(td).find(text).html();
     popup_text.html(new_text);
     popup.fadeIn('fast').delay(1000).fadeOut('slow');
   }, timeout);
   timeout += 1000 + 1000;
});

我从表格单元格中获取文本,并在图层中显示延迟.1个问题:如何让这段代码在无限循环中运行？2问题:当你将鼠标悬停在popop周期暂时停止然后继续时如何做到这一点？非常感谢!

Answer 1

一种方法是将代码重复放在一个函数中,并让函数在最后重复:

var timeout = 1000;
var action = function() {
    // Do stuff here
    setTimeout(action, timeout);
};
action();

但是,正如ahren建议的那样,setInterval可能更好:

var timeout = 1000;
var action = function() {
    // Do stuff here
};
setInterval(action, timeout);

差别很小,但如果机器因某种原因运行缓慢,setInterval版本将平均每秒运行一次代码,而setTimeout版本最多每秒运行一次代码.

然而,这些方法都不能很好地与each()一起工作,因此您需要在某处存储弹出窗口序列并逐步执行:

var timeout = 1000;
var tds = $('#container td');
var index = 0;
var action = function() {
    var td = tds[index];
    var new_text = $(td).html();
    popup.html(new_text);
    popup.fadeIn('fast').delay(1000).fadeOut('slow');

    if(++index >= tds.length)
        index = 0;        
};
setInterval(action, timeout);
action();

最后,为了避免在弹出窗口悬停时移动到下一个弹出窗口,您可以在函数开头添加一个检查.还需要重新安排动画,以便他们"检查悬停 - 淡出 - 更改文本 - 淡入".

var timeout = 1000;
var tds = $('#container td');
var index = 0;
var action = function() {
    if(popup.is(':hover'))
        return;

    var td = tds[index];
    var new_text = $(td).html();
    popup.fadeOut('slow', function() {
        popup.html(new_text);
    }).fadeIn('fast');

    if(++index >= tds.length)
        index = 0;        
};
setInterval(action, timeout);
action();

jsFiddle:http://jsfiddle.net/qWkYE/2/