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

Question

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

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

Answer 1

这通常称为去抖动。这是good article关于节流和去抖。

The Debounce technique allow us to "group" multiple sequential calls in a single one.

本文中列出了多个实现，但示例实现可能是(此版本将在多次调用结束时调用事件，一旦它们停止触发指定数量的事件)时间):

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 毫秒。