Question

I am very new to JS and am trying to modify the JavascriptKit jQuery-based megamenu system to delay showing the menu until the mouse has been hovering over the anchor object for a specified time.

The problem I am facing right now is that it seems that the clearTimeout that is called on mouseout only suspends the setTimeout, rather than canceling, clearing, resetting it.

At this point I am just showing an alert after a setTimeout call. Currently I have the timeout interval set to 2000 for testing.

As an example, since I have it set to 2 seconds delay right now, if I mouse over the object 4 times for 1/2 second, the 5th time I mouse over the object my test alert box appears instantly.

I thought clearTimeout was supposed to completely destroy the timed event. Why does it appear to only pause the countdown?

teststuff:function(){
    if(jkmegamenu.toggletest==1)
     {
         jkmegamenu.executetimedcommand()
         jkmegamenu.toggletest=0
     }
    else
     {
         //jkmegamenu.executetimedcommandcancel()
         clearTimeout(jkmegamenu.teststuff);
     }
    },

    executetimedcommand:function(){
        if(jkmegamenu.toggletest==1)
        {
            alert('abcde')
        }
    },

    canceltimedcommand:function(){
    clearTimeout(jkmegamenu.teststuff);
},

Answer 1

clearTimeout takes a timer id as a parameter, not a function reference.

for example, if you’re setting a timeout for jkmegamenu.teststuff, you would do it like this

// set the delayed call
var timerID = setTimeout(jkmegamenu.teststuff, 2000);

// cancel it
clearTimeout(timerID);
timerID = 0;