javascript-设置超时和清除超时问题

提前感谢您在这方面的帮助

我正在编写一个click事件，它在元素上设置一个活动状态，然后在几秒钟后删除该活动状态。这可以正常工作，但如果您在一行中快速单击链接几次，则会出现一些奇怪的行为。菜单会快速打开和关闭，或者在后续单击后再次关闭之前不会完全显示。我的猜测是clearTimeout真的没有足够快地清除计时器，或者根本不是我写这篇文章的方式。函数正在启动，但不确定奇怪的行为发生了什么。任何帮助都将不胜感激。我的代码如下-克里斯

$(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);
            }
        });

下面的解决方案谢谢

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

---

这里有一个明确的顺序或操作问题，除此之外：

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

作为一个快速解决方案，您可以简单地将变量设置为全局变量，并按照以下行修改代码：

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

您可能还希望删除正在使用的中间toggleEditPanelTimeoutFiredthisLinkClicked函数，以使代码完全工作。例如：

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

---

setTimeouttoggleEditPanelTimeoutFired$this，2000；这绝对是错误的。您是否希望将toggleEditPanelTimeoutFired的初始调用延迟2000毫秒？如果是这样，您需要传递函数，而不是调用函数。查看其他setTimeout调用中的匿名函数？这样做……此外，如果希望在单击之间共享toggleEditPanelTimeout变量，则需要在单击处理程序外部声明该变量。现在你每次都在传递未定义到clearTimeout。谢谢你！这就是我需要的推动。我用解决方案更新了我的帖子。再次感谢你-克里斯