如何仅在存在延迟的情况下执行函数

Question

我想在页面上创建一个加载栏，只有当用户在异步请求上等待2秒或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上设置了一个超时，它只会在加载条出现时延迟，然后它不会因为同时触发了结束事件而消失。因此，在开始事件触发后，我需要测量结束事件是否发生，如果没有，则添加loaderClass，直到结束事件触发。你知道我怎样才能做到这一点吗？

Answer 1

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");
});
},

Answer 2

一种解决方案可以是在loading函数中声明一个变量，将addClass部分移动到tdi:ajax:start事件函数中的setTimeout中，并将setTimeout生成的timeoutId分配给先前声明的变量。然后，在您的tdi:ajax:end事件函数中，您可以在移除类之前对timeoutId调用clearTimeout。这应该可以防止类在删除后被重新添加