Javascript 按键事件 - 仅在重复按键事件时才去抖动？

Question

用例

我有一个人或组的列表（就像在 FB Messenger 中一样）（左窗格）
当我切换人时，我会加载消息（API 调用）。
如果我快速按下箭头，那么我不想对每个人进行 API 调用，而是只想加载我暂停并等待的人。

目前我正在去抖动 300ms 来实现这个。

handleSwitchKeyEvent: function() {
    if (this.pendingLoad) {
        // Still pending continue to debounce
        clearTimeout(this.pendingLoad);
        fn = this.loadContent;
    } else {
        // No longer pending - So load data immediately
        this.loadContent();
    }

    // Delay the load
    this.pendingLoad = setTimeout(function () {
        clearTimeout(this.pendingLoad);
        this.pendingLoad = 0;
        fn && fn.call(this);
    }, 300);
}

问题

当我在消息 1 时 - M1 详细信息已加载
当我快速按下按键时 - M2 将加载，然后下一条消息将发生反跳）

我想避免这个 M2 负载。我不确定是否有可能在同一流程中混合去抖动和非去抖动

Answer 1

而不是 "debounce" 您可能正在寻找启动超时并等待设定持续时间的东西，然后再调用传入的最后一个参数的函数。这是一个快速的'n'dirty缓冲函数（未经测试):

function buffer( fn, duration ) {
    // Store a timeout id and last args called with
    var buffer;
    var lastArgs;
    return function( ) {
        // The last args will be used
        lastArgs = arguments;
        // If buffer hasn't started, kick it off
        if (!buffer) {
            buffer = setTimeout(function() {
                // After duration, call the function with args
                // Reset buffer
                fn.apply(null, lastArgs);
                buffer = null;
            }, duration);
        }
    }
}

编辑：忘记清除缓冲区变量

Javascript 按键事件 - 仅在重复按键事件时才去抖动？

Javascript Key Event - Debouce only when it is repeated key event?

javascript

debouncing