Function image stabilization
Function anti-jitter (debounce) :When an event is triggered continuously, the event handler will only execute once if no event is triggered again within a certain period of time. If the event is triggered again before the set time is reached, the delay will start again. As shown in the figure below, when scroll event is triggered continuously, Handle function is not executed. When scroll event is not triggered within 1000 milliseconds, scroll event will be delayed.
Function debounce(fn, wait) {var timeout = null; return function() { if(timeout ! == null) clearTimeout(timeout); var args = arguments timeout = setTimeout(()=>{ fn.apply(this,args) }, wait); }} function handle() {console.log(Math.random()); } // Window.addEventListener ('scroll', debounce(handle, 1000));Function of the throttle
Function throttle: When events are continually triggered,Make sure that the event handler is called only once in a given period of time. For example, when we use water from the faucet, when the valve is opened, the water flows down. With the fine traditional virtue of thrift, we have to turn the faucet down a little, and it is best to drop it at a certain time interval as we follow a certain rule. As shown in the figure below, the Handle function is not executed immediately when the scroll event continues to be triggered, but only once every 1000 milliseconds.
Function throttling can be implemented in two main ways: timestamps and timers. Next, implement Throttle in two separate ways
Throttle code (timestamp) :
Var throttle = function(func, delay) {var prev = date.now (); Return function() {var context = this; Var args = the 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));When a high frequency event fires, the first time it’s done immediately (the time between binding the scroll function and the actual event that fires is usually greater than delay, so if you have to scroll within 1000 milliseconds of the page loading, I can’t do that o(╥ $$)o), and then fire the event as often as possible, It is also executed once per delay time. When the last event is triggered, the event will not be executed again (the interval between the last event triggered and the penultimate event triggered is less than delay, why less than delay? Because greater than is not called high frequency ah (╹, ▽)).
Throttle code (timer) :
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));When the event is triggered, we set a timer. When the event is triggered again, if the timer exists, it is not executed until after the delay time, the timer executes the execution function and clears the timer, so that the next timer can be set. When the event is fired for the first time, the function is not executed immediately, but after a delay of seconds. Then, no matter how frequently the event is triggered, it is executed only once per delay time. When the firing is stopped for the last time, the function may be executed again due to the delay of the timer.
Make both timestamps and timers available
It is possible to use a timestamp or timer in the throttle. More precisely, you can use a timestamp + timer to execute the event handler immediately after the first event is fired, and again after the last event is fired.
// Throttle throttle = function(func, delay) {var Timer = null; var startTime = Date.now(); return function() { var curTime = Date.now(); var remaining = delay - (curTime - startTime); var context = this; var args = arguments; clearTimeout(timer); if (remaining <= 0) { func.apply(context, args); startTime = Date.now(); } else { timer = setTimeout(func, remaining); } } } function handle() { console.log(Math.random()); } window.addEventListener('scroll', throttle(handle, 1000));Within the throttle function, startTime startTime, current time curTime and delay are used to calculate the remaining time remaining. Remaining <=0 indicates that the event handler is executed (ensuring that the event handler is executed immediately the first time an event is fired and every delay). Set it to trigger after Remaining time if it is not already (ensuring that the event handler can be executed again after the last event is triggered). Of course, if an event is triggered again during the remaining time, the current timer is cancelled and a remaining is recalcated to determine the current state.
conclusion
Function buffeting: Combine several operations into one operation. The principle is to maintain a timer that fires a function after a delay, but if it fires again after a delay, it cancels the previous timer and resets. This way, only the last action can be triggered.
Function throttling: Causes the function to fire only once at a given time. The principle is to trigger a function by determining whether it has reached a certain time.
Function throttling guarantees that a true event handler will be executed within a certain amount of time, regardless of how often the event is fired, whereas function jitters only fire once after the last event. For example, in the infinite page load scenario, we want the user to make Ajax requests every once in a while while scrolling the page, rather than asking for data when the user stops scrolling. Such a scenario, it is suitable to use throttling technology to achieve.