[ACCEPTED]-stop settimeout in recursive function-settimeout

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

Also, the anonymous 4 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 3 you just want to call a function, it is 2 sufficient to pass the name of the function 1 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();
   }
});

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

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

foo = setTimeout(function, time);

then call

clearTimeout(foo);

if you want to cancel that 1 timer.

Hope this helps!

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

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

This is a simple pseudocode for controlling 1 and conditioning recursive setTimeout functions.

    const myVar = setTimeout(function myIdentifier() {

    // some code

    if (condition) {
        clearTimeout(myIdentifier)
    } else {
        setTimeout(myIdentifier, delay); //delay is a value in ms.
    }

}, delay);

You can not stop all the functions that 5 are created, intead of that convert the 4 function to setInterval (represent the same 3 logic that your recursive function) and 2 stop it:

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

The same logic using setInterval:

 // same logic executing stuff in 10 seconds loop
 var timer = setInterval(function(){// do stuff}, 10000)

Stop 1 it:

 clearInterval(timer);

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

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

(function(){

$('#my_div').css('background-color', 'red');
$('#my_div').hover(function(){
var id=setTimeout(function() {
    $('#my_div').css('background-color', 'green');
}, 2000);

var id=setTimeout(function() {
    $('#my_div').css('background-color', 'blue');
}, 4000);
var id=setTimeout(function() {
    $('#my_div').css('background-color', 'pink');
}, 6000);

    })

$("#my_div").click(function(){  
        clearTimeout(id);

        })

})();

0