CODEWITHSUNDEEP
javascriptjquery
Petru Lebada
Petru Lebada

Reputation: 1682

Stop timeout within a function from another function

function One(){
   setTimeout(function(){ 
            Two();
    },3000);
}

function Two(){
   setTimeout(function(){ 
            One();
    },3000);
}

function Stop(){
   alert('this should run,and the functions above should stop');
}

I want to stop autorun of the first two functions,when you click on the third. By now,if you click on the third,the alert shows up,but then the loop continue.Any way of doing this?

Upvotes: 2

Views: 1661

Answers (5)

vp_arth
vp_arth

Reputation: 14982

Something like this :

function TimerController(){
    var ids = {};
    this.start = function(id, time, fn) {
        if (ids[id]) clearTimeout(ids[id]);
        ids[id] = setTimeout(function(){
            fn();
            delete ids[id];
        }, time);
    }
    this.stop = function(id) {
        clearTimeout(ids[id]);
        delete ids[id];
    }
    this.stopAll = function() {
        for (var id in ids) this.stop(id);
    }
}

var ctrlr = new TimerController();

function One(){
    ctrlr.start('one', 3000, Two);
}

function Two(){
    ctrlr.start('two', 3000, One);
}
function Stop() {
    ctrlr.stopAll();
}

Little explanation: timeouts and intervals in javascript both return identifier, that can be used for event cancelling.

var id = setTimeout(function(){console.log('Triggered!');}, 0); 
clearTimeout(id);

Function will never been called in the example above.

So, we should store timeout ids, if we want to be able to stop it.
TimerController above incapsulate this logic.

Upvotes: 1

Anand Dwivedi
Anand Dwivedi

Reputation: 1500

var timeout1;
//... Define Function name 
function rotate() {
timeout1 = setTimeout( rotate, 4000);
 }

  • Another way 

    var rotateTimeout;
rotateTimeout = window.setInterval(rotate,4000); 
window.clearInterval(rotateTimeout);

Upvotes: 0

Mario
Mario

Reputation: 8300

If you store the ID of the timeout call you can clear it at any time. 

var timeoutId1, timeoutId2;

function One() {
  timeoutId1 = setTimeout(function() {
    Two();
  }, 3000);
}

function Two() {
  timeoutId2 = setTimeout(function() {
    One();
  }, 3000);
}

function Stop() {
  // alert('this should run,and the functions above should stop');
  clearTimeout(timeoutId1);
  clearTimeout(timeoutId2);
}

Upvotes: 1

Mihai Matei
Mihai Matei

Reputation: 24276

var oneTimeout, twoTimeout;

function One(){
   oneTimeout = setTimeout(function(){ 
            Two();
    },3000);
}

function Two(){
   twoTimeout = setTimeout(function(){ 
            One();
    },3000);
}

function Stop(){
   clearTimeout(oneTimeout);
   clearTimeout(twoTimeout);
   alert('this should run,and the functions above should stop');
}

Upvotes: 3

r0dney
r0dney

Reputation: 745

You should use var timer = setTimeout(function()...); return timer; in your first two function and pass the two timer variable (which holds a number identifying the timeout timer) to the third function. Then just call clearTimeout(timer) when the third function gets called.

Check out this MDN docs for timeout

Upvotes: 0

Related Questions