Home > Article > Web Front-end > JS simple implementation of anti-shake - debounce and throttling - throttle
Ps: For example, in the search box, the user uses the change
event to call the search when typing. If the user If you search every time you enter, how much server resources will be consumed? Even if your server resources are very powerful, you don't want to do this.
One solution is to search for ## every time the user stops typing and the delay exceeds 500ms
#String, this is anti-shake.
function debounce(fn, delay) { // 维护一个 timer,用来记录当前执行函数状态 let timer = null; return function() { // 通过 ‘this’ 和 ‘arguments’ 获取函数的作用域和变量 let context = this; let args = arguments; // 清理掉正在执行的函数,并重新执行 clearTimeout(timer); timer = setTimeout(function() { fn.apply(context, args); }, delay); } } let flag = 0; // 记录当前函数调用次数 // 当用户滚动时被调用的函数 function foo() { flag++; console.log('Number of calls: %d', flag); } // 在 debounce 中包装我们的函数,过 2 秒触发一次 document.body.addEventListener('scroll', debounce(foo, 2000));
time 2. Throttle - throttleAnother solution thandelay
debounce
After the function is encapsulated, return to the internal Function
- Every time an event is triggered, the current
timer
will be cleared and the timeout will be reset and called. This will cause each high-frequency event to cancel the previous timeout call, causing the event handler to not be triggered
- Only when the high-frequency event stops, the timeout call triggered by the last event can Execute
# after
antishake Be more relaxed. At this time, we don’t want the user to input blindly, but give the user some search prompts, so the limit is to query the String every time
500ms. This is throttling.
1) Timestamp implementation:
function throttle(func, delay){ let prev = Date.now(); return function(){ const context = this; const args = arguments; const now = Date.now(); if(now - prev >= delay){ func.apply(context, args); prev = Date.now(); } } }When a high-frequency event is triggered, it should be executed immediately for the first time (if the interval between the event-binding function and the actual triggering event is greater than
delay2) Timer implementation:), and then no matter how frequently the event is triggered, the same It will be executed every
delayseconds. When the last event is triggered, the event will no longer be executed.
When an event is triggered, we set a timer. When the event is triggered again, if the timer exists, it will not be executed; until
delay After seconds, the timer executes the execution function and clears the timer so that the next timer can be set.
fucntion throttle(func, delay){ let timer = null; return funtion(){ let context = this; let args = arguments; if(!timer){ timer = setTimeout(function(){ func.apply(context, args); timer = null; }, delay); } } }When the event is triggered for the first time, the function will definitely not be executed immediately, but will be executed after
delay3) Combined use of timestamps and timers, the throttling function will be executed immediately when an event is triggered, and the throttling functionseconds.
After that, events are triggered continuously and will be executed every
delayseconds.
When the last stop is triggered, the function may be executed again due to the
delaydelay of the timer.
function throttle(func, delay){ let timer = null; let startTime = Date.now(); return function(){ let curTime = Date.now(); let remaining = delay - (curTime - startTime); const context = this; const args = arguments; clearTimeout(timer); if(remaining <= 0){ func.apply(context,args); startTime = Date.now(); }else{ timer = setTimeout(func, remaining); } } }needs to be executed in each
delayRelated articles:The function will definitely be executed once in time, so the start time, current time and
delayare used inside the throttling function to calculate
remaining, when
remaining <= 0indicates that it is time to execute the function. If the time has not yet arrived, set it to trigger after the
remainingtime. Of course, if an event occurs again during
remaining, the current timer will be canceled and a
remainingwill be recalculated to determine the current status.
Detailed explanation of throttling and anti-shake debounce of javascript function
Detailed explanation of throttling and anti-shake of javascript function
The above is the detailed content of JS simple implementation of anti-shake - debounce and throttling - throttle. For more information, please follow other related articles on the PHP Chinese website!