I was asked to make a small div cycle a fade in and fade out effect. There are several ways to do this, but I am wondering why the following only runs the effect one time.

 $(document).ready(function() {
    (function(){
      setTimeout(function(){$("#foo").fadeOut().delay(800).fadeIn(800);},0)
    })();
 });

As far as I can tell, the function should run recursively, but it doesn't.

I went with setInterval(function(){$("#foo").fadeOut().delay(800).fadeIn(800);}, 0); because it gets the job done, but I'd still like to know why setTimeout didn't work as I expected.

I was asked to make a small div cycle a fade in and fade out effect. There are several ways to do this, but I am wondering why the following only runs the effect one time.

 $(document).ready(function() {
    (function(){
      setTimeout(function(){$("#foo").fadeOut().delay(800).fadeIn(800);},0)
    })();
 });

As far as I can tell, the function should run recursively, but it doesn't.

I went with setInterval(function(){$("#foo").fadeOut().delay(800).fadeIn(800);}, 0); because it gets the job done, but I'd still like to know why setTimeout didn't work as I expected.

• javascript
• jquery

Share Improve this question Follow asked Mar 29, 2011 at 4:20 Fred WilsonFred Wilson 2,21733 gold badges1818 silver badges2222 bronze badges 1

• 2 Why do you think it would run recursively? – Shad Commented Mar 29, 2011 at 4:26

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 6

Please don't use setInterval for this.

You are calling setInterval with a delay of 0. This means it will continue to execute - faster than the animations can plete. This will keep adding animation effects to jQuery's internal queue, building memory usage over time.

You could increase the delay time to a value at least equal to the length of the animations, but this is unreliable. Timers (and animations) can be delayed by other code, and this sort of hardcoding should be avoided.

Instead, take this approach:

function fadeInOut() {
    $("#foo").fadeOut().delay(800).fadeIn(800, fadeInOut);
}
fadeInOut();

Here, you are passing the fadeInOut function as a callback that is automatically called when jQuery finishes the fadeIn animation. This guarantees that a new cycle of animations won't begin until the previous cycle has pleted.

setTimeout(fx,delay) is going to be invoked one time when the delay elapses. Calling it with a delay of 0 in this case is the same as calling the code once without a timeout.

setInterval is called every time the interval elapses, in your case all the time because the interval is 0. I think you want something more like:

setInterval(function(){
  $('#foo').toggleFade(800);
}, 800);

My favorite timeout vs interval posting

The setTimeout method will do something after a period of time whereas the setInterval method will iteratively do something after X number of seconds (depending on the interval).

So to get setTimeout to do something iteratively, you would need to wrap the setTimeout within a loop (or similar).

But based on what you are after - the setInterval method is the better of the two.

Check out:

http://www.w3schools./jsref/met_win_settimeout.asp

and

http://www.w3schools./jsref/met_win_setinterval.asp

Here is the defination of the two

setTimeout - The setTimeout function delays for a specified time period and then
triggers execution of a specified function. Once the function is triggered the setTimeout
has finished. You can of course terminate the execution of the setTimeout before it
triggers the function by using the clearTimeout function.

setInterval - The setInterval function also delays for a specified time before
triggering the execution of a specific function. Where it differs is that after
triggering that function the mand doesn't plete. Instead it waits for the
specified time again and then triggers the function again and continues to repeat
this process of triggering the function at the specified intervals until either the
web page is unloaded or the clearInterval function is called.

setTimeout(func, millis) says "after millis has elapsed, I will invoke func". Your func is

function(){
    $("#foo").fadeOut().delay(800).fadeIn(800);
}

So after zero milliseconds elapse, your function gets called. But there is nothing in your function that tells it to invoke setTimeout again.

Something like this will work:

function my_func() {
    // do something
    setTimeout(my_func, 1000);
}

my_func();