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);
}

问题

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

我想避免这种M2负载。我不确定是否有可能在同一流程中混合debouce和non-debounce

Answer 1

而不是“debounce”你可能正在寻找一些启动超时的东西，并在调用传入的最后一个参数的函数之前等待一段设定的持续时间。这是一个快速缓慢的缓冲函数（未经测试）：< / p>

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关键事件 - 仅在重复关键事件时才进行Debouce？

1 个答案: