Question

我想在每次调用超过300毫秒的ajax调用时向body元素添加一个“loading”类。所以我将以下脚本添加到我的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调用在300ms到期之前结束，要求删除类并清除定时器，假设这需要10ms，但随后定时器会在290ms之后触发......

我想知道我怎么能测试呢？和天气我做错了什么来实现上述任务。

P.S 我正在使用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");
        }
    });
});

ClearTimeout不能正常工作（可能是在第一次计时器触发前清除）

1 个答案: