Clear array of setTimeout's

Question

Ok so I have a function in my AJAX application which sticks a tooltip in the corner after a certain amount of time to help prompt the user along with what they're doing. There is also a second function which clears the timeout if the user clicks somewhere else as that tooltip wont be relevant anymore.

I'm starting to have an issue now with setting multiple tooltips on timeouts, setting them is fine but I can't find an efficient way to cancel them if the user moves on.

Currently my code looks like this

var tuttimer = new Array();

function showtooltip(uniqueid, delay){
    tuttimer[uniqueid] = setTimeout(function(){
        //Create tooltip code here
    },delay);
}

function clearTuttimer(){
    if(typeof tuttimer != 'undefined'){
        for (var i = 0; i < tuttimer.length; i++) {
            clearTimeout(tuttimer[i]);
        }
    }
}

So the tuttimer array is created at page load and then whenever a user does something which would case a tooltip to display the showtooltip() function is called and is given a unique id and a delay time.

But if the user were to move on to something else it calls the function clearTuttimer() which checks to see if the array exists and then loops through and clears each individual timeout.

However this isn't working. Hopefully someone can point me in the right direction. Many thanks.

score 15 · Accepted Answer · answered Oct 23 '12 at 14:51

If you use array, then use Array.push method.

var tuttimer = [];

function showtooltip(delay){
    tuttimer.push(setTimeout(function(){
        //Create tooltip code here
    },delay));
}

function clearTuttimer(){
    for (var i = 0; i < tuttimer.length; i++) {
        clearTimeout(tuttimer[i]);
    }
}

If you want to use uniqueid, then use an object instead of array.

var tuttimer = {};

function showtooltip(uniqueid, delay){
    tuttimer[uniqueid] = setTimeout(function(){
        //Create tooltip code here
    },delay);
}

function clearTuttimer(){
    for (var k in tuttimer) {
        clearTimeout(tuttimer[k]);
    }
}

Great that's even cleaner than my answer. – Jacob Tomlinson Oct 23 '12 at 14:52 — Jacob Tomlinson, Oct 23 '12 at 14:52

score 0 · Answer 2 · answered Oct 23 '12 at 14:52

As usual just typing the question has made me seen the error of my ways.

The problem comes from me setting the array keyword to some predefined value and then when I loop I'm looking for numeric keys. To overcome this I've modified

function showtooltip(uniqueid, delay){
    tuttimer[uniqueid] = setTimeout(function(){
        //Create tooltip code here
    },delay);
}

to be

function showtooltip(uniqueid, delay){
    tuttimer.push(setTimeout(function(){
        //Create tooltip code here
    },delay));
}

Clear array of setTimeout's

2 Answers2

Linked