When performing operations such as window resize, Scroll, and input box content verification, if the event processing function is called at an unlimited frequency, the burden on the browser will be increased, resulting in poor user experience. Debounce and throttle can be used to reduce the frequency of calls without compromising performance.

Function image stabilization

Debounce: When an event is continuously triggered and no event has been triggered for a certain period of time, the event handler is executed once. If the event is triggered again before the specified time, the delay is restarted. As shown in the following figure, handle is not executed when the Scroll event is continuously triggered. The Scroll event will be delayed when no scroll event is triggered within 1000 milliseconds.

To implement a simple debounce~ debounce code:

Function debounce(fn, wait) {var timeout = null; return function() { if(timeout ! == null) clearTimeout(timeout); timeout = setTimeout(fn, wait); Function handle() {console.log(math.random ()); } // The scroll event window.addeventListener ('scroll', debounce(handle, 1000));Copy the code

When the Scroll event is continuously triggered, the event handler handle will only be called once after scroll stops for 1000 milliseconds. In other words, the event handler Handle has not been executed during the continuous triggering of the Scroll event.

Function of the throttle

Function throttling: Ensures that event handlers are called only once in a certain period of time when events are continuously emitted. Throttling popular explanation is like our tap water, as soon as the valve is opened, the water pouring down, holding the good traditional virtue of thrift, we have to turn the tap down a little, it is best to be as we will according to a certain rule in a certain time interval drop by drop. As shown in the figure below, when the Scroll event is continuously triggered, handle is not executed immediately but only once every 1000 milliseconds.

Function throttling can be implemented in two main ways: timestamp and timer. Throttle ~ is then implemented in two separate ways

Throttle code (timestamp) :

Var throttle = function(func, delay) {var prev = date.now (); return function() { var context = this; var args = arguments; Var now = Date. Now (); If (now-prev >= delay) {func. Apply (context, args); Prev = Date. Now (); }} function handle() {console.log(math.random ()); } window.addEventListener('scroll', throttle(handle, 1000));Copy the code

When the high frequency event is triggered, the first time will execute immediately (to the scroll event binding function and the actual triggering event interval is generally greater than delay, if you must within 1000 milliseconds of the web page to scroll, I can’t o(╥﹏╥) O), and then how frequently trigger events, It is executed only once per delay time. The event will not be executed after the last event is triggered. (The interval between the last event and the penultimate event is less than delay. Why is it less than delay? If it is larger than that, it is not called high frequency (╹▽╹).

Throttle code:

Var throttle = function(func, delay) {var timer = null; return function() { var context = this; var args = arguments; if (! timer) { timer = setTimeout(function() { func.apply(context, args); timer = null; }, delay); } } } function handle() { console.log(Math.random()); } window.addEventListener('scroll', throttle(handle, 1000));Copy the code

conclusion

Function stabilization: Combine several operations into one operation. The idea is to maintain a timer that fires after the delay, but if it fires again within the delay, the timer will be cancelled and reset. In this way, only the last operation can be triggered.

Function throttling: causes functions to fire only once in a given period of time. The principle is to trigger the function by judging whether a certain time has been reached.

Difference: Function throttling guarantees that a true event handler will be executed within a specified period of time, no matter how frequently the event is triggered, whereas function buffering only fires once after the last event. For example, in an infinite load scenario, we want the user to make Ajax requests every once in a while while the page is scrolling, rather than asking for data when the user stops scrolling. This scenario is suitable for throttling technology to achieve.