Question

我正在为此大型（且记录不充分）的框架开发一个插件。我需要将Javascript函数绑定到事件。问题是，几乎在同一时间多次触发该事件（我对此无能为力），并且该函数只能运行一次，特别是因为其中包含一些Ajax调用。

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

Answer 1

通常称为debouncing。这是有关节流和反跳的good article。

使用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));

这将阻止再次调用事件侦听器，直到至少100ms停止触发它为止。

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

1 个答案: