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秒前重置。请查看下表。我需要它以这种方式工作。

=====================================================================
| Time   | Action   |     Result           |     Timer              |
=====================================================================
|0 sec   | scrolled | event should fire    | Timer Starts           |
|0.25 sec| scrolled | event shouldn't fire | Timer shouldn't reset  |
|0.5 sec | scrolled | event shouldn't fire | Timer shouldn't reset  |
|1.0 sec | scrolled | event shouldn't fire | Timer shouldn't reset  |
|1.1 sec | scrolled | event should fire    | Timer should reset     |
=====================================================================

Answer 1

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

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

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

1 个答案: