This is the 21st day of my participation in the August Text Challenge.More challenges in August
Image stabilization
This concept is often discussed in conjunction with throttling, as their functions are similar and slightly different, but they have in common the need to reduce the number of times functions (events) are called, hence the name “shock prevention”.
Similar to its name, I first give an example of the image in life to illustrate the shaking, must be very familiar with the elevator, the following is a cartoon of everyone queuing into the elevator
Look at the picture above, everyone gets into the elevator one by one. Normally, the first person gets in and the door closes before the second person gets in, right? The elevator waits for the last person to enter, then closes the door after a set number of seconds, and performs an up or down function.
This is a very good image of the anti – shake function, if the anti – shake function keeps firing, the anti – shake function will wait for the trigger motivation to die down, then wait for the set time, and finally execute the callback function. It’s the same as getting on an elevator. The elevator waits for everyone to get on the elevator, and after 2 seconds the doors will automatically close.
Here’s another example from actual development:
Listen for the scrollbar event (in fact, other events can also create this condition, such as mouse movement) and return to print out the height of the scrollbar from the top
window.onscroll = listenScroll
function listenScroll() {
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
console.log('Scrollbar height from top:', scrollTop)
}
Copy the code
Just scroll from the top to the bottom and print a whole bunch.
While satisfying, this raises the question, do I really need to listen for scrolling events so often? If the event handler I’m listening for is a very performance intensive operation, isn’t that a waste of browser performance?
Is there a way around it?
Yes, it is a nature problem with the elevator I introduced above. The solution is: I wait for all the people to get on, and then execute the closing of the elevator door.
I wait for the user to stop working on the scrollbar, and then I call back the function. How to determine whether the user has stopped working on the scrollbar depends on the person (200ms not working on the scrollbar or 300ms is ok).
Here is a simple version of the stabilization function, using the closure save timer
/ * * * *@param {function} fn- Callback function *@param {number} delay- Waiting time */
function debounce(fn, delay) {
let timer = null;
return function () {
// If there is a timer, it means that the timer has been called before. Reset the timer when the callback function is triggered ⏲
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(fn, delay); }; } you need to change the way the above function is listened onwindow.onscroll = listenScroll - modify:window.onscroll = debounce(listenScroll, 200)
Copy the code
The same callback is now much better after being debounce only three times (I dragged the bar and got stuck 😂) which is a good reduction in the number of times the callback is triggered!
But there are also some questions that I will cover in the future, and add the underscore function to the high spec version of the underscore