时间戳

首页 > 解决方案 > 有没有办法一次捕获多个相同类型的事件？

javascript - 有没有办法一次捕获多个相同类型的事件？

问题描述

我正在为这个大的（并且没有很好的文档记录）框架开发一个插件。我需要将 Javascript 函数绑定到事件。问题是，这个事件几乎在同一时间被触发多次（我无法控制），我需要该函数只运行一次，特别是因为其中包含一些 Ajax 调用。

我对 Javascript 不是很熟悉，所以这个问题可能很愚蠢，但是有没有办法以某种方式在短时间内“缓冲”事件，并且当没有更多传入时，运行该函数？

标签： javascriptevents

解决方案

这通常称为debouncing. 这是一篇关于节流和去抖动的好文章。

Debounce 技术允许我们将多个顺序调用“组合”在一个调用中。

文章中列出了多个实现，但一个示例实现可能是（此版本将在您的多个调用结束时调用该事件，一旦它们停止触发指定的时间量）：

function debounce(callback, duration) {
    let timer = null;
    let args = [];
    let thisVal = null;
    function trigger() { callback.apply(thisVal, args); }
    function onEvent() {
        thisVal = this;
        args = [].slice.call(arguments);
        clearTimeout(timer);
        timer = setTimeout(trigger, duration);
    }
    return onEvent;
}

然后您可以使用以下代码调用它，例如：

function myEventListener(data) {
    // do your thing
}
window.addEventListener('my-event', debounce(myEventListener, 100));

这将阻止再次调用您的事件侦听器，直到它停止被触发至少 100 毫秒。

推荐阅读