javascript - 取消 setTimeout()

Question

我有一个警报弹出窗口，当发生特定操作时会出现该弹出窗口。 5 秒后，使用 setTimeout() 隐藏警报弹出窗口。

我遇到的问题是，如果我多次触发弹出窗口，有时后续的弹出窗口会出现但立即消失。我相信这是因为之前的超时仍在进行中。

我尝试使用 clearTimeout() 取消超时，但这没有任何区别。请参阅下面的代码:

function showAlert() {
    var elem = $('#alert');
    var alertTimeout;

    elem.addClass('active');

    if (alertTimeout) {
        clearTimeout(alertTimeout);
    }

    alertTimeout = setTimeout(function() {
        elem.removeClass('active');
    }, 5000);
}

正确的做法是什么？

Answer 1

当函数返回时，您的 alertTimeout 变量就会消失。您需要将其移到函数之外:

var alertTimeout; // <==========================
function showAlert() {
    var elem = $('#alert');

    elem.addClass('active');

    if (alertTimeout) {
        clearTimeout(alertTimeout);
    }

    alertTimeout = setTimeout(function() {
        elem.removeClass('active');
    }, 5000);
}

<小时/>

旁注:理想情况下，此代码位于 module 中或使用 let 而不是 var (ES2015+) 或作用域函数(ES5 及更早版本)的作用域 block ，以便 alertTimeout 和 showAlert 不是全局的。

如果由于某些遗留支持原因 showAlert 必须 是全局的，您仍然可以阻止 alertTimeout 成为全局的，如下所示:

var showAlert = (function() {
    var alertTimeout;
    return function showAlert() {
        var elem = $('#alert');

        elem.addClass('active');

        if (alertTimeout) {
            clearTimeout(alertTimeout);
        }

        alertTimeout = setTimeout(function() {
            elem.removeClass('active');
        }, 5000);
    };
})();

(请注意，这意味着 showAlert 不再提升。)