CODEWITHSUNDEEP
jquery
PersianMan
PersianMan

Reputation: 2779

how to use settimeout for looping a function

i have a slideshow with 4 pictures which has a pagination, now i want them to be show one by one in a loop, for looping i have this code:

  function myfn(interaltime) {
  setTimeout('$("#picgallery_pagging li:eq(0)").trigger("click")', 0);
  setTimeout('$("#picgallery_pagging li:eq(1)").trigger("click")', interaltime);
  setTimeout('$("#picgallery_pagging li:eq(2)").trigger("click")', interaltime*2);
  setTimeout('$("#picgallery_pagging li:eq(3)").trigger("click")', interaltime*3);
  setTimeout('myfn('+interaltime+')',interaltime*4);
  };
  myfn(3000);

my problem: it doesn't work properly and just runs it once and interaltime variable is empty in the second round

each button in pagination runs my custom function effect for showing the pic and as u see i have to trigger click function on each button on my pagination.(i dont know how to use delay in jquery with my own function)

note: i checked intervaltime variable in console log and it was empty on the seconde turn! but i dont know how to fix it!
edit: i used setInterval but still intercaltime variable was empty in the second ture

Upvotes: 0

Views: 126

Answers (3)

Alnitak
Alnitak

Reputation: 340055

You're passing strings to setTimeout - this is not best practise, and can be downright unreliable.

Try this, instead:

function autoclick($el, delay) {
    var i = 0, n = $el.length;
    (function loop() {
        $el.eq(i).trigger('click');    // do your thang
        i = (i + 1) % n;               // increment and reset (if required)
        setTimeout(loop, delay);       // loop "recursively"
    })();                              // invoke immediately
}

autoclick($('#picgallery_pagging li'), 1000);

It eliminates the repetition in your code, and arranges to call itself over and over for each single element, not for the whole batch of four.

The call isn't really recursive, even though it may look like it, because it's actually the browser's event loop that's responsible for dispatching the function call over and over.

Demo at http://jsfiddle.net/alnitak/PfmVt/

Upvotes: 2

BBagi
BBagi

Reputation: 2095

Try:

  setTimeout(function() {
                $("#picgallery_pagging li:eq(0)").trigger("click");
             }, 0);

instead of 

  setTimeout('$("#picgallery_pagging li:eq(0)").trigger("click")', 0);

And repeat for all of your other setTimeouts. Essentially, use an anonymous function for the setTimeout

Upvotes: 0

J0HN
J0HN

Reputation: 26961

One of the options would be like this:

function myfn(interaltime) {
    function wrapper(){
        do_stuff();
        setTimeout(wrapper, interaltime);
    }
    setTimeout(wrapper, 0);
}

You are basically setting the timeout to run the same function again and again. This is quite simplified sample, not even trying to provide means for cancelling the loop. Also, please note that it's not a recursive call in any way, so you won't run into a stackoverflow issues.

even simpler option is to use setInterval:

function myfn(interaltime) {
    return setInterval(do_stuff, intervaltime);
}

This way you will be able to cancel the loop, something like

var loop = myfn(100);
//somewhere later
clearInterval(loop);

Upvotes: 0

Related Questions