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.

Answer 1

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]);
    }
}