Function of anti - shake and throttling

Function of anti – shake and throttling

Why anti-shake/Throttling:

When our front-end development, if we use onMouseOver, onMouseMove, resize, such a very fast implementation method, if the callback of these methods is very large, may cause browser lag, severe or even directly froze.
Moreover, if a large number of Ajax requests are initiated in a short time, the server may be put under certain pressure and the network may be blocked.
In this case, we need to limit the method’s callback by using function stabilization or throttling

Let’s start by looking at how events are frequently emitted: let’s write a sample file:

HTML

<h1 class="h1"> Example </h1> <div class="box"></div>Copy the code

css

 html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .h1 {
            text-align: center;
            font-size: 96px;
            color: pink;
        }
        .box {
            margin-top: 100px;
            width: 80%;
            height: 200px;
            margin: 0 auto;
            background: yellowgreen;
        }
Copy the code

js

let h1 = document.querySelector('h1') let box = document.querySelector('.box') let num = 1 box.onmousemove = function ()  { h1.innerHTML = num++ } function add() { console.log('123') h1.innerHTML = num++ }Copy the code

After the operation:

Then we move the send mouse from the left to the right of the box to trigger its onMousemove event

It took me about a second to get from left to right but it triggered 127 times, which is probably fine in this case, but what if it was Ajax or a complex callback? Assuming 60 fires per second, each callback must be completed within 1000/60 = 16.67ms, or there will be a lag.

To solve this problem, there are generally two solutions:

Debounce stabilization
Throttle orifice

Image stabilization (debounce)

First of all, let’s talk about anti-shake

How to solve the problems mentioned above through shaking prevention
- If the user frequently triggers an event, the method will delay the execution of the event for a period of time after the event is triggered. If the event is triggered again during the event execution, the previous event will be cancelled and the event will be executed again.
- In order to realize the above idea, we need to use setTimeout(delay timer) to assist the implementation, delay the operation of the code, start the time when the first run, if triggered again during the run, the last recorded delay timer will be cleared with clearTimeout, and start the time again. If the event is not triggered again during the timing period, wait until the delay time expires and execute the code

Let’s use this method to deal with the above code:

Add function add() {h1.innerhtml = num++}Copy the code

Function debounce(fn, wait) {let timer; Timer return function () {if (timer! == null) {clearTimeout(timer)} timer = setTimeout(fn, fn) }} // box. Onmousemove = debounce(add, 1000)Copy the code

This script waits for the wait time before executing

Function debounce(fn, wait) {let timer; return function () { if (timer) clearTimeout(timer) let callNow = ! timer; SetTimeout (() => {timer = null}, If (callNow) add()}} // box. Onmousemove = debounce(add, 1000)Copy the code

This method fires once and waits for the wait event to fire again

After we do that we move it again and we see that it only fires once from left to right

Having solved the problem of firing multiple times, let’s look at throttling

The throttle

What is throttling

When the user performs frequent triggering events, only one event is executed at a time,
There are two main ways to implement throttling, one is to use time stamps, the other is to set timers

The time stamp

function throttle(func, wait) { let previous = 0; return function () { let now = Date.now(); If (now-previous > wait) {add() previous = now // Assign current timestamp to previous }}} box.onmousemove = throttle(add, 1000)Copy the code

The timer

function throttle(fn, wait) { let timeout; return function () { if (! Timeout = setTimeout(() => {// declare the timer timeout = null; // Execute method}, wait)}}} box.onmousemove = throttle(add, 1000)Copy the code

This is my understanding of some shallow throttling and flutter prevention learning from Hu Yui if you have a problem welcome to point out

Here is the big guy link, big guy is very hard very strong: juejin.cn/post/684490…

Function of anti – shake and throttling