Function Throttling and Anti-shake

  css, Front end, html, javascript, Programmer

Preface

The trigger right of an event belongs to the user most of the time, and problems may arise in some cases:

  • Sending data to the background, users frequently trigger, causing pressure on the server
  • Some browser events: window.onresize, window.mousemove, etc. are triggered with very high frequency, causing browser performance problems.

If you encounter these problems, you need to use function throttling and anti-jitter.

The starting address of this article isGitHub blog, writing articles is not easy, please support and pay more attention!

I. Function throttle

Function throttling: after a function is executed once, it will be executed for the second time only after it is larger than the set execution cycle..
There is a function that needs to be triggered frequently. In order to optimize performance, only the first time that the function is triggered is allowed to take effect within a specified period of time, and then it will not take effect.

1. How to Realize

The principle is to use the time stamp to judge whether the execution time of callback has reached, record the time stamp of last execution, then trigger the scroll event to execute callback every time, judge whether the interval between the current time stamp and the time stamp of last execution has reached the specified time period in callback, if so, execute, and update the time stamp of last execution, thus circulating;

html,
 body {
 height: 500%;  //Make it scroll
 }
function throttle(fn, delay) {
 //Record the time when the function was triggered last time
 var lastTime = 0;
 return function() {
 //Record the triggering time of the current function
 var nowTime = Date.now();
 if (nowTime - lastTime > delay) {
 //correct this pointing problem
 fn.call(this);
 //synchronization time
 lastTime = nowTime;
 }
 }
 }
 Document.onscrew = throttle (function () {console.log ('scroll event triggered'+Date.now()) }, 200)

The above example uses the closure feature-The value of the variable lastTime can be stored in memory for a long time.

2. Application scenario of function throttling

Callbacks need to be triggered at regular intervals to control the frequency of function calls:

  • Implementation of drag-and-drop function of DOM element (mousemove)
  • Search association (keyup)
  • Calculate the mouse movement distance (mousemove)
  • Canvas analog sketchpad function (mousemove)
  • Mousedown/keydown Event in Shooting Game (only one bullet can be fired per unit time)
  • Monitor scrolling events to determine whether more is automatically loaded at the bottom of the page: after debounce is added to scroll, only after the user stops scrolling will it be determined whether it has reached the bottom of the page; If it is throttle, the page will be judged at intervals as long as it scrolls.

Second, function debounce

Anti-shake function: a function that needs frequent triggering. within a specified period of time, it will only take effect for the last time. the previous function will not take effect.

1. How to Realize

The principle is to call the function for the first time, create a timer, and run the code after a specified time interval. When the function is called the second time, it will clear the previous timer and set another one. If the previous timer has already been executed, this operation is meaningless. However, if the previous timer has not been executed, it is actually to replace it with a new timer and then delay execution for a certain time.

< button id='btn' > button < /button >
 <script type="text/javascript">
 function debounce(fn, delay) {
 //Record the last delayer
 var timer = null;
 return function() {
 //Clear Last Delay
 clearTimeout(timer)
 timer = setTimeout(function() {
 fn.apply(this)
 }, delay)
 }
 }
 document.getElementById('btn').onclick = debounce(function() {
 Log ('click event triggered'+Date.now ())
 }, 1000)
 </script>

The above example also uses the closure feature-The value of the variable timer can be stored in memory for a long time.

2. Application Scenarios of Function Anti-shake

For continuous event responses, we only need to perform one callback:

  • Each resize/scroll triggers a statistical event
  • Verification of text input (send AJAX request for verification after continuous text input, and verify once)

III. Summary

The core of function throttling and function debounce is actually to limit a method to be triggered frequently, and the reason why a method is triggered frequently is mostly because of DOM event monitoring callback, which is also the application scenario of function throttling and debounce in most cases.

Reference article

Function Throttling and Function Anti-shake

Analysis of JavaScript Function Throttling and Function Debounce Application Scenarios

Principle Analysis of Function Throttling and Function Anti-shake