Understand the implementation of anti – shake and throttling

There are some events that we can’t control the trigger frequency in the previous interface operation. Such as mouse movement event onMousemove, scroll bar event onScroll, window size change event onresize, or hand shaking repeatedly click the button and so on; Instantaneous operations will cause these events to be triggered at high frequencies, and if the callback function of these events is responsible, the response speed will not be able to keep up with the frequency of our departure; Anti-shake and throttling are two optimization schemes for the above situation;

Image stabilization

First set a delay time, the anti-shake and throttling implementation will use —-time=3000ms, this time is customized, according to the actual situation;

Stabilization is, for a very high frequency event triggered, if not be triggered again in 3 seconds, then execute him immediately, if be triggered again in 3 seconds, this event will not perform, continue to wait another 3 seconds, and then judge 3 seconds is not fire again, until don’t be triggered in a given delay time to execute when the event; Say a little astringent, write an example Chou Chou;

Scenario: The button to place the form is clicked repeatedly to avoid duplicate submission

    / * if * /
    export const Debounce = (fn, time) = > {
        let dTimer; // Define global
        return function () {
            /* If dTimer is true, setTimeout is prevented from continuing, so dTimer cannot be set to null(false), so callNow is always false, and fn cannot execute */
            if (dTimer) {
                clearTimeout(dTimer)
            }
            // eslint-disable-next-line prefer-rest-params
            const agrs = arguments;
            constcallNow = ! dTimer; dTimer =setTimeout(() = > {
                dTimer = null
            }, time)
            if (callNow) {
                fn.apply(this, agrs)
            }
        }
    }
Copy the code

Then call this function with a button on the interface:

    <el-button type="primary" size="default" @click="fangDou">Test image stabilization</el-button>
Copy the code
    fangDou: Debounce(function () {
      console.log("Shake control succeeded.");
     }, 3000),
Copy the code

The effect is: when this button is clicked for the first time, it will trigger the event, and then each click will make judgment. If it will not trigger within 3 seconds, it will start timing again for 3 seconds. If it is clicked once after more than 3 seconds, it will trigger this event.

The throttle

Throttling is easy to understand, is a fixed period, only one action, such as the submit button, the specified time is 3 seconds, when you click the button 10 times in 3 seconds, the button will only trigger once, if you click the button 10 times in 10 seconds, the button will be penalized three times;


    / * throttling * /
    export const Throttle = (fn, time) = > {
        let tTimer;
        return function () {
            if (tTimer) {
                return
            }
            // eslint-disable-next-line prefer-rest-params
            const args = arguments
            tTimer = setTimeout(() = > {
                fn.apply(this, args)
                tTimer = null
            }, time)
        }
    }
Copy the code

Try again in the interface:

     <el-button type="primary" size="default" @click="jieliu">Test the throttle</el-button>
Copy the code
    jieliu: Throttle(function () {
          console.log("Throttle successful");
        }, 1000)
Copy the code

As you can see, I clicked a bunch of times in a row, but he stuck to the same delay every second, no matter how fast my hand was;