David Walsh在这里提供了一个很棒的防抖实现(链接)。
// 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
也不是全局变量吗? - Bergi