This article was originally Links: https://cloud.tencent.com/developer/article/1356193
Js anti-shake and go into throttling
0. introduced
First give an example:
Analog ajax query request made in the input box, no effect of adding the anti-shake and the throttle, full executable code attached herein:
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>没有防抖</title> <style type="text/css"></style> <script type="text/javascript"> window.onload = function () { //模拟ajax请求 function ajax(content) { console.log('ajax request ' + content) } let inputNormal = document.getElementById('normal'); inputNormal.addEventListener('keyup', function (e) { ajax(e.target.value) }) } </script> </head> <body> <div> 1.没有防抖的输入： <input type="text" name="normal" id="normal"> </div> </body> </html>
Effect: Enter an input box, it will trigger a "ajax request" (here is the console).
No image stabilization and throttling
Cons: waste resource request, can be added to optimize image stabilization and throttle it.
This article will explain what is stabilization and are throttling their application scenarios, and implementation. Image stabilization and throttle are made to address short period of time a large number of trigger function caused by performance issues, such as the trigger frequency response caused by excessive speed to keep up with the trigger frequency, delayed, or suspended animation phenomenon of Caton. But they respond to business needs is not the same, so the realization of the principle is not the same, the following specific look.
1. Stabilizer (Debounce)
1.1 What is the image stabilization
Callback function is triggered in the event n seconds, and then, if this has been triggered in n seconds, then re-timing.
1.2 application scenarios
(1) the user continuously inputs a string of characters in the input box, only after the input to perform the last query ajax request, which can effectively reduce the number of requests, request resource conservation;
(2) window's resize, scroll events, constantly adjusting the size of the browser window, or the corresponding event is triggered when scrolling, image stabilization allowed to trigger only once;
1.3 realized
Liezi or above, where it is added to optimize image stabilization, complete code is as follows:
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>加入防抖</title> <style type="text/css"></style> <script type="text/javascript"> window.onload = function () { //模拟ajax请求 function ajax(content) { console.log('ajax request ' Content + ) } function Debounce (Fun , Delay ) { return function (args ) { // Get Variable Function and scope of the let that = the this the let _args = args // Whenever an event is triggered, it will clear the current timeer, then call set the timeout override the clearTimeout (Fun .id ) Fun .id = the setTimeout ( function ( ) {Fun . call (that , _args ) } , Delay ) } } the let inputDebounce = Document.getElementById('debounce') let debounceAjax = debounce(ajax, 500) inputDebounce.addEventListener('keyup', function (e) { debounceAjax(e.target.value) }) } </script> </head> <body> <div> 2.加入防抖后的输入： <input type="text" name="debounce" id="debounce"> </div> </body> </html>
Code Description:
1. Each event is triggered, the current timer is cleared and re-set the timeout call that re-timing. This will lead to a timeout called once before each high-frequency event will be canceled, resulting in the event handler can not be fired;
2. Only when the high-frequency event is stopped, the last time the event trigger to call a timeout to perform after the delay time;
effect:
After addition of stabilization, when the input is continuously input box, and do not send the request only when there is no longer input for a specified time interval, the request will be sent. If you stop input first, but they enter within a specified interval, will re-trigger timing.
Adding image stabilization
2. throttle (Throttle)
2.1 What is throttling
A specified unit of time, within this unit time, only one trigger event callback execution, if an event is triggered with a unit of time several times, only once can take effect.
2.2 application scenarios
(1) mouse continuously trigger an event (such as clicking), only triggered only once in a unit of time;
(2) at page infinite loading scenario, it requires the user to scroll the page, once ajax request issued at intervals, rather than stopping the operation to scroll the page when the user request data;
(3) monitor the rolling event, such as whether the bottom of the slide automatically load more, with the throttle to judge;
2.3 realized
Or above Lieh here to join throttling to optimize the look, complete code is as follows:
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>加入节流</title> <style type="text/css"></style> <script type="text/javascript"> window.onload = function () { //模拟ajax请求 function ajax(content) { console.log('ajax request ' + content) } function throttle(fun, delay) { let last, deferTimer return function (args) { let that = this; let _args = arguments; let now = +new Date(); if (last && now < last + delay) { clearTimeout(deferTimer); deferTimer = setTimeout(function () { last = now; fun.apply(that, _args); }, delay) } else { last = now; fun.apply(that, _args); } } } let throttleAjax = throttle(ajax, 1000) let inputThrottle = document.getElementById('throttle') inputThrottle.addEventListener('keyup', function (e) { throttleAjax(e.target.value) }) } </script> </head> <body> <div> 3.加入节流后的输入： <input type="text" name="throttle" id="throttle"> </div> </body> </html>
Effect: The experiment can be found in the continuous input, the code setting will be installed, executed once every 1 second ajax request
Join throttle
3. Summary
Summarize the difference between anti-shake and throttling:
- Effect:
Image stabilization function is executed only within a certain period of time; and the throttle function is the interval time to perform, no matter how often trigger event, will ensure that you will perform a real event handler within the specified time.
- Principle:
Image stabilization is to maintain a timer function is triggered after a specified time delay, but within the delay time, then again trigger will clear the current timer and then re-set the timeout call that re-timing. As a result, only the last operation can be triggered.
The throttle is the next event will reset the timer by judging whether a certain time to reach the trigger function, if no time is specified using a timer to delay.
If you have questions, please correct me.