1. The throttle

Let’s start with the scrollbar listener example:

Listen for browser scroll events and return the distance between the current scroll bar and the top

function showTop() { var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; Console. log(" scrollTop: "+ scrollTop); } window.onscroll = showTop;

At runtime, you will find a problem: the default frequency of execution of this function is too! High! ! . How high? In Chrome, for example, you can click on the scroll bar for a selected page, then click down on the keyboard once, and see that the function executes 8-9 times!

However, we don’t really need such high frequency feedback, after all, browser performance is limited and shouldn’t waste it here, so let’s discuss how to optimize this scenario.

Image stabilization (debounce)

When the event is first fired, instead of executing the function immediately, it is given a duration value, such as 200ms, and then,

< span style = “margin-bottom: 0pt; margin-bottom: 0pt; margin-bottom: 0pt; Since we’ve already mentioned timings, the key implementation is the setTimeout function. Since we need another variable to hold the timings, we can use closures to maintain global purity:

/** * fn: function debounce(fn, delay) {let timer = null; /** * fn: function debounce(fn, delay); Return function () {if(timer) {clearTimeout(time); } timer = setTimeout(fn, delay); } } window.onscroll = debounce(showTop, 1000);
window.onscroll = debounce(showTop, 1000);

You will notice that the scroll bar position will not be printed until you have stopped scrolling for 1 second.

At this point, we have implemented the stabilization, so let’s define it:

For events that are fired continuously over a short period of time (the scroll event above), the idea is that the event handler is executed only once for a certain period of time (1000 milliseconds above).

2. The throttle (throttle)

Continue to think, using the above anti-shaking solution to solve the problem is:

If a scrolling event is triggered over and over again for a limited period of time (such as when a user is bored, holding down and dragging), the current distance from the top will theoretically never be printed as long as the trigger is not stopped.

But what if the product student’s expected solution is to give feedback after a certain interval even if the user keeps dragging the scroll bar?

We can design a function that opens regularly like a control valve, that is, the function is executed once, temporarily fails for a certain period of time, and then reactivates after that period

Effect: If a large number of the same events are fired in a short period of time, after a function is executed once, the function ceases to work for a specified period of time until it retakes effect after that time.

The implementation here uses setTimeout to do a simple thing

*/ function throttle(fn, delay) {let valid = true; return function () { if(! valid) { return false; } valid = false; For example, you can replace the status bit with a timestamp without setTimeout at all, and then determine whether the timestamp difference is greater than the specified interval. SetTimeout (() => {fn(); setTimeout(() => {fn(); valid = true; }, delay); }}
window.onscroll = throttle(showTop, 200);

The result of running the above code is:

If you keep dragging the scroll bar to scroll, it will continue to output the distance between the current position and the top of the time interval of 1s, greatly improving the speed of web games