Image stabilization

Function stabilization means that the callback is executed after the event is triggered for n seconds. If the event is triggered again within n seconds, the timer is reset. This can be used for click-request events to avoid sending multiple requests to the back end for multiple user clicks.Copy the code

The common understanding of anti-shake is to deal with the last trigger. In daily life, for example, bus drivers make sure that all passengers get on the bus before driving

Security code: if(){window.clearTimeout (timeid)} // Clear time until the last one

Execution result: The delay device is 5 seconds

If () timeID is null; if() timeid is null; if() timeID is null; In this case, the timeID is not null, and the end of the delay is null. If startshuka is executed again within 5 seconds, the startshuka will clear the timeID of the previous step, and the timeID will continue to be occupied by the next delay. Until the last one, when the delayer ends and the timeID is null, the execution is restarted.Copy the code

The throttle

Function throttling refers to the specified unit of time. Within this unit of time, only one callback function that triggers an event can be executed. If an event is triggered multiple times within the same unit of time, only one callback function can take effect. Stream can be used to reduce the frequency of event calls through event throttling on scroll function event listeners.Copy the code

Throttling is commonly understood as blocking the first person entering, and serving only one, similar to the cooldown of a CD in a game

Throttle code:

R is the function to be executed. CD is to be executed. Use is the process to be executed. Execute the first time r, fn is false, then the delayer will start at this time, three seconds later, will execute the second time, within the time of the delayer, even if fn is called again, then execute elseCopy the code

Code:

Execution result: The delay device is 3 seconds