javascript - Jquery: Infinite loop and pause - Stack Overflow

admin管理员组

文章数量:1345171

I have this code

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

I get text from table cells and is displayed in the layer with a delay. 1 question: How do I make this code to run in an endless loop? 2 question: How to do that when you hover the mouse over popop cycle temporarily stopped and then continue? Thanks a lot!

I have this code

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

I get text from table cells and is displayed in the layer with a delay. 1 question: How do I make this code to run in an endless loop? 2 question: How to do that when you hover the mouse over popop cycle temporarily stopped and then continue? Thanks a lot!

• javascript
• jquery
• loops

Share Improve this question Follow asked Aug 23, 2012 at 21:48 NeashNeash 5511 gold badge11 silver badge66 bronze badges 2

• 2 setInterval is your friend. And so are conditional checks. Think if statements. – ahren Commented Aug 23, 2012 at 21:51
• Create an jsfiddle, makes it way easier to play around with. – sQVe Commented Aug 23, 2012 at 22:15

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

One way is to put the code to be repeated in a function, and have the function repeat itself at the end:

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

However, as ahren suggested, setInterval might be better:

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

The difference is slight, but if the machine is running slowly for some reason, the setInterval version will run the code every second on average, whereas the setTimeout version will run the code once each second at most.

Neither of those methods really work well with each(), however, so you'll need to store the sequence of popups somewhere and step through them:

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

Finally, to avoid moving to the next popup while the popup is hovered, you can add a check for that at the start of the function. It's also necessary to rearrange the animations so that they go "check for hover - fade out - change text - fade in".

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/qWkYE/2/

If you like the short clean way, then use the jquery-timing plugin and write:

$.fn.waitNoHover = function(){
  return this.is(':hover') ? this.wait('mouseleave') : this;
};
$('#popups div').repeat().each($).fadeIn('fast',$)
  .wait(200).waitNoHover().fadeOut('slow',$).all()

​

See this on http://jsfiddle/creativecouple/fPQdU/3/

本文标签： javascriptJquery Infinite loop and pauseStack Overflow