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和更早版本），因此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不再悬挂。）

取消setTimeout（）

1 个答案: