Question

提前感谢您的帮助。

我正在编写一个在元素上设置活动状态的click事件，然后在几秒钟后删除活动状态。如果您连续快速点击链接几次（菜单快速打开和关闭，或者在后续点击后再次关闭之前没有完全显示），则可以正常工作。我的猜测是clearTimeout真的不能像我写这个那样快速地（或者根本不是）清除定时器。虽然这个功能正在解雇所以不确定奇怪的行为是怎么回事。任何帮助，将不胜感激。我的代码如下。 -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);
            }
        });

下面的解决方案（谢谢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

您在这里遇到了明确的订单或操作问题（除此之外）：

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

您还可能希望删除您正在使用的中间toggleEditPanelTimeoutFired(thisLinkClicked)功能，以使代码完全正常运行。例如：

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

javascript - setTimeout和clearTimeout问题

1 个答案: