CODEWITHSUNDEEP
javascript
Sir
Sir

Reputation: 8277

Can't stop my timeout when i clear the div

Hey I have a setTimeOut();

Which calls itself over and over.

The problem is i want to clear it when the user closes the given div, however i don't know how to abort it with clearTimeout() by using the id of the timeout that was running.

Heres an example of my function:

upgrade(end , new Date().getTime() / 1000 ,text,false);
//happens when you clicks on something

function upgrade(end, start, text, timerId){        

    var per = ( (new Date().getTime() / 1000) - start ) / ( end - start ) * 100;

    if(per>100)per=100;
    if(per<0)per = 0;
    text.innerHTML = Math.round(per)+'%';
timerId = setTimeout(function() { upgrade_bar(end, start, text, timerId) } , 17);
}

Now lets say the user wants to close this timer. How can i do clearTimeout(timerId) when the id's scope is limited to the function?

I have for example this:

document.getElementById("sbmt").addEventListener("click", remove_div, false);
//this happens during windows.onload

Somehow my function remove_div has to clear it. But the time out's id won't have the scope.

What are my options here to allow me to clear time out's ?

Upvotes: 0

Views: 112

Answers (3)

Jay Harris
Jay Harris

Reputation: 4271

you can hook the timeout id to the window scope like so.

 window['timerId'] = setTimeout(function() { upgrade_bar(end, start, text, timerId) } , 17);

replace timerId with window['timerId'] or window.timerId so you can explicitly hook it to the global scope.

and clear it like so

 clearTimeout(window['timerId']);

or 

 window.clearTimeout(window.timerId);

btw timerId is not a local variable. this var timerId would have made it local.

Upvotes: 0

J David Smith
J David Smith

Reputation: 4810

There are a couple of ways you could do this.

First off, you could return the timerId from upgrade. You'd store that value in a variable which could be accessed by your other function.

Alternatively, you can create a variable inside the parent object (in your case, it looks like that'd be window) which stores the id.

For example:

function upgrade(end, start, text, timerId) {
    // do stuff
    return setTimeout(/*params*/);
}
var timerId = upgrade(/*params*/);

function remove_div(event) {
    // do stuff
    clearTimeout(this.timerId);
}

document.getElementById("sbmt").addEventListener("click", remove_div.bind({'timerId': timerId, 'element': document.getElementById("sbmt")}, false);

Or:

var timerId;
function upgrade(end, start, text) {
    // do stuff
    timerId = setTimeout(/*params*/);
}

function remove_div(event) { 
    // do stuff
    clearTimeout(timerId);
}

document.getElementById("sbmt").addEventListener("click", remove_div, false);

Upvotes: 1

Myles
Myles

Reputation: 21510

You need access to the id returned by setTimeout, as you point out it's not accessible the way you have it written, but it's a simple matter to move it out.

For example:

var timeout;
function start() {
    timeout = window.setTimeout(function() {
        start();
    }, 200);
}

function stop() {
    window.clearTimeout(timeout);
}

Upvotes: 1

Related Questions