javascript - JavaScript按键事件-仅在重复按键事件时才反跳？

用例


我有一个人或组的列表（如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);
}

问题


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


我想避免这种M2负载。我不确定是否可以在同一流程中同时使用反跳和非反跳

最佳答案

而不是“去抖动”，您可能正在寻找可以触发超时并等待设置的持续时间的函数，然后使用传入的最后一个参数调用该函数。这是一个快速的'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);
        }
    }
}

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