Javascript 如何仅在存在延迟时执行函数？

我想在页面上创建一个加载栏，只有当用户在异步请求上等待2秒或更长时间时才会出现。我有以下代码：

loading: function() {
    $(document).on("tdi:ajax:start", function() {
        $('.loader').addClass("loader--show");
    });

    $(document).on("tdi:ajax:end", function() {
        $('.loader').removeClass("loader--show");
    });
},

---

但现在，只要有1毫秒长的请求，加载条就会在屏幕上闪烁。如果我在addClass上设置了一个超时，它只会延迟加载条出现的时间，然后它不会消失，因为同时会触发end事件。因此，在启动事件触发后，我需要测量是否发生了结束事件，如果没有，则添加loaderClass，直到触发结束事件。有什么办法可以做到这一点吗？

一种解决方案是在

加载

函数中声明一个变量，将

addClass

部分移动到

tdi:ajax:start

事件函数中的

setTimeout

中，并将

setTimeout

生成的timeoutId分配给先前声明的变量。然后，在

tdi:ajax:end

事件函数中，可以在移除类之前调用timeoutId上的

clearTimeout

。这将防止类在删除后被重新添加。

一种解决方案是在

加载

函数中声明一个变量，将

添加类

部分移动到

tdi:ajax:start

事件函数中的

设置超时

，并将

setTimeout

生成的timeoutId分配给先前声明的变量。然后，在

tdi:ajax:end

事件函数中，可以在移除类之前调用timeoutId上的

clearTimeout

。这将防止在删除类后重新添加该类。

启动事件时，将标志设置为true，然后启动超时。激发结束事件时，将标志设置为false。当超时触发时，检查标志；如果为true，则添加该类。当启动事件触发时，将标志设置为true，然后启动超时。激发结束事件时，将标志设置为false。当超时触发时，检查标志；如果为真，则添加该类。您甚至不需要进行测试<代码>清除超时（超时ID）不会在不存在的timeoutId上给出错误您可以在外部匿名函数中移动

timeoutId

。由于某些原因，在非常快速的ajax操作中，

加载程序--show

类永远不会被删除，加载程序就永远在那里。如果我在很长的请求上尝试它，它会起作用。2秒后，加载程序出现，完成后消失。但是当事件在几毫秒后结束时，它就挂起了。你能添加日志记录并看看会发生什么吗？似乎超时没有被正确清除…似乎每次有异步请求时，脚本都会再次加载，因此脚本会同时运行几次，而您甚至不需要进行测试<代码>清除超时（超时ID）不会在不存在的timeoutId上给出错误您可以在外部匿名函数中移动

timeoutId

。由于某些原因，在非常快速的ajax操作中，

加载程序--show

类永远不会被删除，加载程序就永远在那里。如果我在很长的请求上尝试它，它会起作用。2秒后，加载程序出现，完成后消失。但是当事件在几毫秒后结束时，它就挂起了。你能添加日志记录并看看会发生什么吗？似乎超时没有被正确清除…似乎每次有异步请求时，脚本都会再次加载，以便脚本同时运行几次

loading: function() {
    let timeoutId; 
    $(document).on("tdi:ajax:start", function() {
        // This will init the delayed execution
        timeoutId = setTimeout(function() { 
           $('.loader').addClass("loader--show"); 
        }, 2000);
    });

    $(document).on("tdi:ajax:end", function() {
        // This will clear timeout and cancel it execution
        clearTimeout(timeoutId);
        $('.loader').removeClass("loader--show");
    });
},