JavaScript中setTimeout（）和clearTimeout（）的范围是什么？

Question

加载/重新加载页面后30秒，如果满足某些条件，我会显示一个弹出窗口。这是我用来实现其正常工作的代码：

jQuery(document).ready(function($) {
    ..........
    if (localStorage.getItem("displaypopup") == "true") {
        var ticker = setTimeout(function() {
            $('#colorboxform').click();
        }, 30000);
    }
    ..........
}

我有一个触发相同弹出窗口的按钮。如果有人单击该按钮，我想取消我在上面的代码中配置的setTimeout()操作，因为当用户已经单击该按钮以显示弹出窗口时，我不想再次再次调用该弹出窗口，起来为了取消setTimeout()操作，我使用了此方法：

jQuery(document).ready(function($) {
    ..........
    $("#headercolorboxform").click(
        function() {
            clearTimeout(ticker);
        }
    );
    ..........
}

不幸的是，它不起作用。即使在我单击按钮触发弹出窗口之后，在加载/重新加载页面后30秒钟，我仍然会弹出窗口。显然，clearTimeout(ticker)并没有达到我的预期。我怀疑这是一个范围问题。我的代码片段在一起是：

jQuery(document).ready(function($) {
    ..........
    if (localStorage.getItem("displaypopup") == "true") {
        var ticker = setTimeout(function() {
            $('#colorboxform').click();
        }, 30000);
    }
    $("#headercolorboxform").click(
        function() {
            clearTimeout(ticker);
        }
    );
    ..........
}

您知道我的代码有什么问题吗？为什么clearTimeout(ticker)没有取消setTimeout()。也许这是一个范围问题？我感谢您的帮助。谢谢。

Answer 1

确实是一个范围问题，ticker变量在clearTimeout范围中不可用。要解决这个简单的问题，请在顶部声明变量，然后像下面这样分配它：

jQuery(document).ready(function($) {
 var ticker; //declare here
    ..........
    if (localStorage.getItem("displaypopup") == "true") {
        ticker = setTimeout(function() {
            $('#colorboxform').click();
        }, 30000);
    }
    $("#headercolorboxform").click(
        function() {
            clearTimeout(ticker);
        }
    );
    ..........
}

在条件或循环语句中声明任何内容都将其限制在该范围内，仅意味着您无法访问该范围以外在此范围内声明的内容。

而且按钮的ID也不同，但您说过希望通过单击相同的按钮来消除它。您确定ID正确吗？