Search code examples
javascriptprototypejscleartimeout

Prototype.js how to fix use of clearTimeout( )


I'm using Prototype.js to load an html element when the user performs a mouseover on certain list items. I'm using setTimeout() to load the content only if the mouse is still over the list item after a given amount of time. I want to use clearTimeout when the user performs a mouseout on the same list item.

clearTimeout() is not clearing my timeout. I am pretty sure this is because of a common variable scope issue hidden from me by my lack of familiarity with Prototype.js

Can someone point out the flaw in this code or determine what I need to add to make the clearTimeout() function work properly?

document.observe( 'dom:loaded', function() {
var timeout;

$$('.nav-primary li.category').each( function( item ) {
    item.observe('mouseover', function(event) {
        event.stopPropagation();
        categoryId = event.currentTarget.id;
        getCategoryBlurb(categoryId);
        timeout = setTimeout( function() {
            showCategoryInfo(categoryData, categoryId);
        }, waitTime);
    });

    item.observe('mouseout', function(event) {
            event.stopPropagation();
            clearTimeout(timeout);
    });
    });
});

Updated Code

$$('.nav-primary li.category').each( function( item ) {
    var timeout = null;

    item.observe('mouseover', function(event) {
        event.stopPropagation();
        categoryId = event.currentTarget.id;
        getCategoryBlurb(categoryId);
        if( timeout === null ) {
            timeout = setTimeout( function() {
                showCategoryInfo(categoryData, categoryId);
            }, waitTime);
        }
        console.log(timeout);
    });

    item.observe('mouseout', function(event) {
            if( timeout !== null ) {
                console.log(timeout);
                clearTimeout(timeout);
                timeout = null;
            }
    });

});

Solution

  • clear the timeout before you set it

    if (timeout) { clearTimeout(timeout); }
    timeout = setTimeout( function() { /* code here */ });