CODEWITHSUNDEEP
javascriptjquery
Ben
Ben

Reputation: 9001

How to loop a function for a progress bar on a slideshow?

I have a slideshow that changes images with an interval of 5000.

The function to show the progress bar between one image and the other is as follows:

function timebar(){
    $('#timebar').stop().css({width:0});
    $('#timebar').animate({width:'100%'},5000);
}

I call this after the slideshow has loaded so that they process at the same time.

I want this function to loop so that the timebar is reset for each slide:

function timebar(){
    $('#timebar').stop().css({width:0});
    $('#timebar').animate({width:'100%'},5000);
    setTimeout(timebar(),5000);
}

However, when this is done, I get the error Maximum call stack size exceeded.

How can I have this function repeat every 5000ms?

Upvotes: 0

Views: 89

Answers (2)

Arun P Johny
Arun P Johny

Reputation: 388316

You need to pass a function reference to setTimeout, in your case you are making infinte recursive calls by invoking the function timebar().

Since you have an infinite recursive call the call stack size will be exceeded. 

function timebar(){
    $('#timebar').stop().css({width:0});
    $('#timebar').animate({width:'100%'},5000);
    setTimeout(timebar,5000);
}

Upvotes: 1

Satpal
Satpal

Reputation: 133403

You need to pass the function reference to setTimeout, currently you are recursively calling timebar() function and setTimeout has no use at all.

You need to use

setTimeout(timebar,5000);

instead of

setTimeout(timebar(),5000);

Upvotes: 1

Related Questions