通过参数去抖动函数调用

Posted 2023-02-22

【中文标题】通过参数去抖动函数调用

【英文标题】：Debounce function calls by their arguments

【发布时间】：2017-04-27 12:23:43

【问题描述】：

David Walsh 有一个很棒的去抖动实现 here。

// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
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);
    ;
;

我在生产中使用它，效果很好。

现在我遇到了一个更复杂的去抖需求案例。

我有一个事件，它使用如下参数调用事件处理程序： $(elem).on('onSomeEvent', (e) => handler(e.X) );

我可以接受频繁触发此事件并每秒调用处理程序 1000 次。我不需要对处理程序本身进行去抖动。 但就我而言，对于每个 e.X，我希望它在一段时间内只被调用一次，比如 250 毫秒。

我正在考虑创建一个包含 x 和上次运行时间的二维数组，但我不想声明任何全局变量。

有什么想法吗？

* 编辑 *

在阅读了@Tim Vermaelen 的回答后，我已经这样实现了它，并且它起作用了：

export function debounceWithId(func, wait, id, immediate?) 
        var timeouts = ;
        return function () 
            var context = this, args = arguments;
            var later = function () 
                timeouts[id] = null;
                if (!immediate) func.apply(context, args);
            ;
            var callNow = immediate && !timeouts[id];
            clearTimeout(timeouts[id]);
            timeouts[id] = setTimeout(later, wait);
            if (callNow) func.apply(context, args);
        ;
    ;

【问题讨论】：

var timeout 在原代码中也不是全局变量吗？

好像很不幸

不是不幸，但正是你想要的？

显然，因为它成功了

【参考方案1】：

我经常使用的如下：

var debounce = (function () 
    var timers = ;

    return function (callback, delay, id) 
        delay = delay || 500;
        id = id || "duplicated event";

        if (timers[id]) 
            clearTimeout(timers[id]);
        

        timers[id] = setTimeout(callback, delay);
    ;
)(); // note the call here so the call for `func_to_param` is omitted

除了我可以在事件中添加唯一 ID 之外，我认为您的解决方案没有太大区别。如果我理解正确的话，你必须把它包裹在 handler(e.X) 周围。

debounce(func_to_param, 250, 'mousewheel');
debounce(func_to_param, 250, 'scrolling');

【讨论】：

我正在尝试，会通知您。

工作就像一个魅力。我正在为其他人发布我的修改。