"setTimeout" VS "debounce" 插件 - 延迟事件的代码执行

Posted 2023-02-22

【中文标题】"setTimeout" VS "debounce" 插件 - 延迟事件的代码执行

【英文标题】："setTimeout" VS "debounce" plugin - to defer code execution on events

【发布时间】：2014-09-25 12:22:30

【问题描述】：

我想推迟一些事件代码的执行。 使用标准 setTimeout 函数和插件去抖动 (link to debounce) 之间到底有什么区别？

这里有一个例子 setTimeout:

var timeout;
$(window).on("scroll", function() 

    clearTimeout(timeout);
    timeout = setTimeout(function() 

        doSomethingFunction();

    , 500);

);

这里有一个去抖动的例子：

$(window).on("scroll",

    $.debounce(500, doSomethingFunction)

);

当然，使用 debounce 代码会更短，但还有其他好处吗？ 哪个会更快？

【参考方案1】：

debounce 在内部使用setTimeout，因此差异与setTimeout 被触发的次数有关。

debounce 限制它触发setTimeout 的次数。如果在短时间内发送多个请求，则只有一个会通过。

var timeout_id = setTimeout(
    debounce_mode ? clear
    : exec, debounce_mode === undefined ? delay - elapsed
    : delay
);

您可以查看the source code 了解更多信息。

插件将通过设置超时 id 来处理超时。