javascript - setTimeout and clearTimeout issue

Question

Thank you in advance for your help with this.

I'm writing a click event that sets an active state on an element, and then after a couple seconds, removes the active state. This is working fine with the exception that there is some weird behavior happening if you click on the link a few times quickly in a row (menu opens and closes quickly, or doesn't show fully before closing again after a subsequent click). My guess is that clearTimeout really isn't clearing the timer quick enough (or not at all) the way I wrote this. The function is firing though so not sure what's going on with the odd behavior. Any help would be appreciated. My code is below. -Chris

$(document).on('click', '.toggle-edit-panel', function () {
            var toggleEditPanelTimeout;

            // resets timeout function
            function resetEditPanelTimeout() {
                clearTimeout(toggleEditPanelTimeout);
            }
            resetEditPanelTimeout();

            // declares what this is and toggles active class
            var $this = $(this);
            var thisParent = $this.parent();
            thisParent.find('.edit-panel').toggleClass('active');
            $this.toggleClass('active');

            toggleEditPanelTimeout = setTimeout(toggleEditPanelTimeoutFired($this), 2000);

            // sets initial timeout function
            function toggleEditPanelTimeoutFired(thisLinkClicked) {
                toggleEditPanelTimeout = setTimeout(function(){
                    thisParent.find('.edit-panel').removeClass('active');
                    $(thisLinkClicked).removeClass('active');
                },2000);
            }
        });

Solution below (Thanks Aroth!):

    var toggleEditPanelTimeout;
        $(document).on('click', '.toggle-edit-panel', function () {
            // resets timeout function
            clearTimeout(window.toggleEditPanelTimeout);

            // declares what this is and toggles active class
            var $this = $(this);
            var thisParent = $this.parent();
            thisParent.find('.edit-panel').toggleClass('active');
            $this.toggleClass('active');

            // sets initial timeout function
            var theLink = $(this);
            window.toggleEditPanelTimeout = setTimeout(function(){
                $(theLink).parent().find('.edit-panel').removeClass('active');
                $(theLink).removeClass('active');
            },2000);
        });

Answer 1

You've got a definite order-or-operations problem going on here (among other things):

    var toggleEditPanelTimeout;                //value set to 'undefined'; happens first

    // resets timeout function
    function resetEditPanelTimeout() {
        clearTimeout(toggleEditPanelTimeout);  //still undefined; happens third
    }
    resetEditPanelTimeout();                   //value *still* undefined; happens second

    // declares what this is and toggles active class
    //...

    //the value is assigned when this happens; happens fourth:
    toggleEditPanelTimeout = setTimeout(toggleEditPanelTimeoutFired($this), 2000);

As a quick fix, you can simply make the variable global, and revise the code along the lines of:

    clearTimeout(window.toggleEditPanelTimeout);  //clear the previous timeout 

    // declares what this is and toggles active class
    //...

    //schedule a new timeout
    window.toggleEditPanelTimeout = setTimeout(toggleEditPanelTimeoutFired($this), 2000);

You'll also likely want to remove that intermediate toggleEditPanelTimeoutFired(thisLinkClicked) function that you're using in order to get the code fully working. For instance:

    //schedule a new timeout
    var theLink = $(this);
    window.toggleEditPanelTimeout = setTimeout(function(){
        $(theLink).parent().find('.edit-panel').removeClass('active');
        $(theLink).removeClass('active');
    }, 2000);