1. Function throttle

1.1 Name Resolution

After a function is executed once, it is executed a second time only after the specified execution period.

1.2 Principle Analysis

Its principle is to use timestamp to determine whether have to callback the execution time, record the last execution time stamp, and then trigger scroll event callback, the callback to judge the current timestamp from the last time to perform the interval of time stamp has reached the stipulated time period, if it is, is executed, and update the last execution time stamp, so cycle;

1.3 code

functionThrottle (fn, delay) {var lastTime = 0;return functionVar nowTime = date.now (); var nowTime = date.now ();if(nowtime-lastTime > delay) {fn.call(this); // Synchronization time lastTime = nowTime; } } } document.onscroll = throttle(function() {
    console.log('Scroll event triggered' + Date.now())
}, 200)
Copy the code

The above example uses the closure feature to keep the value of the lastTime variable in memory for a long time.

1.4 Application Scenarios

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

  • DOM element drag and drop implementation (Mousemove)
  • Search for Associations (KeyUp)
  • Calculate the distance of mouse movement (Mousemove)
  • Canvas Drawing Board (Mousemove)
  • Shooter mouseDown/KeyDown events (only one shot per unit of time)
  • Listen for scroll events to determine whether more automatically loads at the bottom of the page. After adding debounce to Scroll, users will only know whether they have reached the bottom of the page after they stop scrolling. If you’re throttle, you’re going to do it every time you scroll

2. Function debounce

2.1 Name Resolution

A function that fires frequently, within a specified period of time, allows only the last time to work, not the previous one.

2.2 Principle Analysis

The callback function is executed n seconds after the event is fired, and if it is fired again within n seconds, re-timing works by calling the function for the first time, creating a timer that runs the code after a specified interval. When the function is called a second time, it clears the previous timer and sets another. If the previous timer has already been executed, this operation is meaningless. However, if the previous timer is not executed, it is simply replaced with a new timer and then delayed for a certain amount of time.

2.3 code

<button id='btn'</button> <scripttype="text/javascript">
functionDebounce (fn, delay) {var timer = null;return function() {// Clear the last delay timer clearTimeout(timer) timer =setTimeout(function() {
            fn.apply(this)
        }, delay)
    }
}
document.getElementById('btn').onclick = debounce(function() {
    console.log('Click event triggered' + Date.now())
}, 1000)
</script>
Copy the code

2.4 Application Scenarios

Only one callback is required for continuous event responses

  • The resize/scroll statistics event is triggered every time
  • Validation of text input (send an AJAX request for validation after successive text input, only need to validate once)