如何为事件监听器实现debounce?存储事件出现问题

Question

我有去抖动功能

function debounce(func, wait, immediate) {
// 'private' variable for instance
// The returned function will be able to reference this due to closure.
// Each call to the returned function will share this common timer.
var timeout;
// Calling debounce returns a new anonymous function
return function() {
// reference the context and args for the setTimeout function
var context = this,
args = arguments;
// Should the function be called now? If immediate is true
//   and not already in a timeout then the answer is: Yes
var callNow = immediate && !timeout;
// This is the basic debounce behaviour where you can call this 
//   function several times, but it will only execute once 
//   [before or after imposing a delay]. 
//   Each time the returned function is called, the timer starts over.
clearTimeout(timeout);
// Set the new timeout
timeout = setTimeout(function() {
// Inside the timeout function, clear the timeout variable
// which will let the next execution run when in 'immediate' mode
timeout = null;
// Check if the function already ran with the immediate flag
if (!immediate) {
// Call the original function with apply
// apply lets you define the 'this' object as well as the arguments 
//    (both captured before setTimeout)
func.apply(context, args);
}
}, wait);
// Immediate mode and no wait timer? Execute the function..
if (callNow) func.apply(context, args);
}
}

以及一些功能，例如：

const storageEventCb = () => console.error(1); 
// Define the debounced function
var debouncedCb = debounce(storageEventCb, 1500);
debouncedCb(); // run
debouncedCb(); // ignore 
debouncedCb(); // ignore

感觉很好，但当我打开事件存储时

window.addEventListener('storage', storageEventCb );

我有很多呼叫功能。如何修复？

Answer 1

是否将debounced函数设置为事件侦听器？

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);
};
};
const storageEventCb = () => console.error(1); 
// Define the debounced function
const debouncedCb = debounce(storageEventCb, 1500);
window.addEventListener('storage', debouncedCb);