javascript - ClearTimeout 不能很好地工作（可能是在第一个计时器触发之前清除时）

Question

我想在每个花费超过 300 毫秒的 ajax 调用上为 body 元素添加一个“加载”类。所以我将以下脚本添加到我的 common.js 文件中：

$(document).ready(function ()
{
    var timer;
    $("body").on({
        ajaxStart: function ()
        {
            var body = $(this)
            var timer = setTimeout(function ()
            {
                body.addClass("loading");
            }, 300)
        },
        ajaxStop: function ()
        {
            $(this).removeClass("loading");
            clearTimeout(timer);
        }
    });
});

现在，如果我以至少 1 秒的时间进行 ajax 调用，这将起作用。当它们立即加载时，加载类保留在 body 元素上。

我怀疑第一个 ajax 调用在 300 毫秒到期之前结束，它要求删除类并清除计时器，假设这需要 10 毫秒，但然后计时器在 290 毫秒后触发......

我想知道我该如何测试？和天气我做错了什么来完成上述任务。

PS 我正在使用 ASP.NET MVC。

Answer 1

您正在重新声明变量，失去了先前声明的变量的更高范围：

$(document).ready(function () {
    var timer;
    $(document).on({
        ajaxStart: function () {
            var body = $(document.body);
            timer = setTimeout(function () { //don't use the "var" keyword
                body.addClass("loading");
            }, 300)
        },
        ajaxStop: function () {
            clearTimeout(timer);
            $(this).removeClass("loading");
        }
    });
});