Function throttling and function stabilization, both of which are a means of optimizing js code for high frequency execution.

Let’s see what is anti-shake

Function stabilization: If triggered frequently, you can only execute code once by waiting for enough idle time.

Impact of function shock prevention: prevent functions from being called repeatedly in a very short time, resulting in a waste of resources.

For example, the triggering frequency of some events on the page is very high, such as scroll bar scrolling, window size change, mouse movement, etc. If we need to register such events, we have to consider the efficiency problem, and especially the event processing involves a large number of operations, which makes us headache. Changing the size of a window by even a small amount can result in hundreds of calls to handlers, which can have a huge impact on page performance and can cause a page to block. Therefore, we can consider that every time the window size changes, the scroll bar rolls, and the mouse moves, do not execute the relevant operation immediately, but wait for a period of time, when the window size stops changing, the scroll bar stops rolling, and the mouse stops moving, and then execute the operation after a period of time, just like the elevator closes the door.

That is to say, the high frequency event will be executed only once after N seconds. If the event is triggered again within N seconds, the timing will be restarted.

Function debounce(func, wait) {// Use closure to maintain timer var timeout = null; return function () { var context = this; var args = arguments; ClearTimeout = setTimeout(function(){func.apply(context, args)}, wait); } } function testout(e, content) { console.log(e, content); } var fn = debounce(testout, 2000); Document. onmousemove = function (e) {fn(e, 'debounce'); // Pass the parameter}Copy the code

If the mouse continues to move (constantly triggering events in onMousemove, but with debounce constraint), it does not output. If the mouse stops moving, it will output once (only once) after 1S. )

SetInterval (debounce(fn,500),1000) // Print for the first time after 1500ms, Debounce setInterval(debounce(fn,2000),1000) // Will not print once after 1000ms.Copy the code

Application scenarios There are forms to prevent repeated submission, the search box prompts to send multiple HTTP requests interested can input to understand oh!

reference:Underscore for JavaScript topics

What is throttling

Throttling function: prevents a function from being called consecutively for a short period of time. The next function can be called only after a specified interval has elapsed since the last function was executed. Or you don’t execute the function immediately when you do it, you wait until you don’t do it. For function throttling, there are several scenarios:

1. Refresh rate in the game 2. DOM element drag and drop 3Copy the code

Function of the throttle

function throttle(fn, gapTime) { let _lastTime = null; return function () { let _nowTime = + new Date() if (_nowTime - _lastTime > gapTime || ! _lastTime) { fn(); _lastTime = _nowTime } } } let fn = ()=>{ console.log('boom') } setInterval(throttle(fn,1000),100)Copy the code

Registering a throttle function in the task queue every 0.1s, implementing a simple function to throttle, results in a boom every second

Summary: : Functions tremble and throttling, are methods to control the event trigger frequency.

Refer to the reading

Juejin. Cn/post / 684490…