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

【问题标题】：Javascript Key Event - Debouce only when it is repeated key event?Javascript键事件-仅在重复键事件时才去抖动？
【发布时间】：2015-11-18 21:39:05
【问题描述】：

用例

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

目前我正在去抖 300 毫秒来实现这一点。

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 负载。我不确定是否可以在同一流程中混合去抖动和非去抖动

【问题讨论】：

您能否将关键事件值存储在一个对象或其他东西中，然后让您的去抖动代码在去抖动之前首先检查该对象的值？就像，如果前一个键值与当前事件值相同，它就会去抖动，否则它不会。

标签： javascript debouncing

【解决方案1】：

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

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

【讨论】：