Scroll 上的去抖功能无法按要求工作

Question

我正在尝试限制触发的滚动事件。我需要它每秒钟只发生一次。我在很大程度上实现了它。我正在使用从Link 获得的去抖动功能。它有一个计时器，用于限制事件。在我正在做的每一次滚动中，计时器都会被重置。但我希望它像，计时器应该只重置一次，在上一次滚动后指定的时间（这里是 1 秒）结束后。

 function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

// Usage
var scrollingFn = debounce(function() {
    // All the taxing stuff you do
    console.log('scrolling...');console.log('seperatr');
    document.getElementById('text').textContent += 'Scrolling...';
}, 1000, true);

window.addEventListener('mousewheel', scrollingFn);
window.addEventListener('scroll', scrollingFn);

DEMO

如果您在演示中连续滚动，滚动事件即使在 1 秒后也不会被触发。因为每次滚动都会重置计时器。因此，从该时间段内发生的最后一次滚动开始需要 1 秒。

我的要求是，如果我进行滚动，计时器不应在 1 秒之前重置。请检查下表。我需要它以这种方式工作。

==================================================== ==================== |时间 |行动 |结果 |定时器 | ==================================================== ==================== |0 秒 |滚动 |事件应该触发 |定时器启动 | |0.25 秒|滚动 |事件不应触发 |计时器不应重置 | |0.5 秒 |滚动 |事件不应触发 |计时器不应重置 | |1.0 秒 |滚动 |事件不应触发 |计时器不应重置 | |1.1 秒 |滚动 |事件应该触发 |计时器应重置 | ==================================================== ====================

Answer 1

您将 true 传递给 immediate 参数。这意味着该函数将在快速事件序列中的 first 事件上运行，这正是您的演示程序中发生的情况。

如果您希望代码在一系列滚动事件之后运行，请传递false 而不是true。