If you ever want to throttle an event from being called multiple times, regardless the cause for invocation, use a flag to block subsequent events. There are several strategies:
.1. time-based throttling. suppose you have a function “func”, and you’d like it to be called only once within 200ms:
function func(){
if (document.func_lock) return;
document.func_lock=true; // block future calls
setTimeout(function(){document.func_lock=null;},300);
}
When multiple events are fired at the same time, you can expect all of them arrive within the 300ms window. The above code can be simplified by taking advantage of the timer handle:
function func(){
if (document.func_lock) return;
document.func_lock=setTimeout(function(){return;},300);
}
When the timer expires, the lock is automatically removed.
.2. Remove the flag by using a callback. The process is trivial so I won’t post sample code here.
In terms of flag placement, you can use any unique DOM object. Since I don’t know the context of your application, I’ll just use “document” here. You can also use hash keys that are particular to your application since you are already dealing with local storage. The concept is the same.