stop settimeout in recursive function

Question

Hello,

my problem is that I can not stop a timer.

I had this method to set a timeout from this forum. It supposed to store the identifyer in the global variable. By accident, I found out that it is still running after I hide "mydiv".

I also need to know now, if the recursive function creates multiple instances or just one for the timeouts. Because first I thought that it overwrites "var mytimer" everytime. Now I am not so sure.

What would be a solid way to stop the timer??

var updatetimer= function () {
//do stuff
     setTimeout(function (){updatetimer();}, 10000);

}//end function


//this should start and stop the timer
$("#mybutton").click(function(e) { 
       e.preventDefault();
      if($('#mydiv').is(':visible')){
                   $('#mydiv').fadeOut('normal');
          clearTimeout(updatetimer);

     }else{
                   $('#mydiv').fadeIn('normal');
                   updatetimer();
               }
});

thanks, Richard

Answer 1

I think you misunderstand 'setTimeout' and 'clearTimeout'.

If you want to set a timer that you want to cancel later, do something like:

foo = setTimeout(function, time);

then call

clearTimeout(foo);

if you want to cancel that timer.

Hope this helps!

Answer 2

As written mytimer is a function which never has the value of a timeout identifier, therefore your clearTimeout statement will achieve nothing.

I don't see any recursion here at all, but you need to store the value setTimeout returns you, and if you need to pair this with multiple potential events you need to store it against a key value you can lookup - something like an element id perhaps?

Answer 3

As noted above, the main reason why this code isn't working is that you're passingt he wrong thing into the clearTimeout call - you need to store the return value of the setTimeout call you make in updateFunction and pass this into clearTimeout, instead of the function reference itself.

As a second suggestion for improvement - whenever you have what you call a recursive timeout function, you would be better off using the setInterval method, which runs a function at regular intervals until cancelled. This will achieve the same thing you're trying to do with your updateFunction method, but it's cleaner as you only need to include the "do stuff" logic in the deferred function, and it's probably more performant as you won't be creating nested closures. Plus it's The Right way to do it which has got to count for something, right? :-)

Answer 4

I think that most people are getting at the reason why this isn't working, but I thought I would provide you with updated code. It is pretty much the same as yours, except that it assigns the timeout to a variable so that it can be cleared.

Also, the anonymous function in a setTimeout is great, if you want to run logic inline, change the value of 'this' inside the function, or pass parameters into a function. If you just want to call a function, it is sufficient to pass the name of the function as the first parameter.

var timer = null; 

var updatetimer = function () {
    //do stuff

    // By the way, can just pass in the function name instead of an anonymous
    // function unless if you want to pass parameters or change the value of 'this'
    timer = setTimeout(updatetimer, 10000);
};

//this should start and stop the timer
$("#mybutton").click(function(e) { 
     e.preventDefault();
     if($('#mydiv').is(':visible')){
     $('#mydiv').fadeOut('normal');
     clearTimeout(timer);  // Since the timeout is assigned to a variable, we can successfully clear it now

    } else{
     $('#mydiv').fadeIn('normal');
     updatetimer();
   }
});