如何仅在有延迟时才执行功能？

Question

我想在页面上创建一个加载栏，只有当用户在异步请求上等待 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 事件函数中，您可以在删除 class 之前对 timeoutId 调用 clearTimeout。这应该可以防止 class 在您删除后重新添加。

如何仅在有延迟时才执行功能？

How to execute a function only if there is a delay?

javascript

time

events

delay