Function stabilization and throttling are always interview topics. For function stabilization and throttling writing method, everyone may be familiar with, but in vUE using function stabilization or throttling, here is a small episode oh.

Correct posture in vue

The way many people use it in this area is to define the function directly and then use debounce in the function, which is the wrong way to use it.Why? This is related to the vUE event binding principle, which will not be covered in detail here. If used directly inside the body of a function, the end result is an anonymous instant-execute function to execute, which is not correct.A detailed reference

The principle of

The stabilization of the function

The stabilization of the function is how long it takes to execute the function, which can be understood as such a life scenario (taking an elevator). After clicking the open button of the elevator, the elevator will open the door, and then wait for a period of time to close the door. However, if someone clicks the door opening button again during the waiting period, the elevator will continue to wait for the closing time until the end of the time, and no one clicks the door opening button, the elevator will start to work.

Code written

The first time is not immediately executed

export function debounce(f, t){
    let timer;
    return (. arg) = > {
        clearTimeout(timer);
        timer = setTimeout(() = >{ f( ... arg) }, t) } }Copy the code

The first time is executed immediately

For some scenarios, the first time I don’t need to wait, I need to execute immediately, for example: open the console to get the window attempt size (here we need to keep changing the window size until we stop to get the window view size again).

export function debounceFirstExe(f, t){
    let timer, flag = true;
    return (. args) = > {
        if(flag){ f(... args); flag =false;
        }else {
            clearTimeout(timer);
            timer = setTimeout(() = >{ f(... args); flag =true;
            }, t)
        }
    }
}
Copy the code

Merge version

export  function  debounce(f, t,im = false){
    let timer, flag = true;
    return (. args) = > {
        // Immediate execution is required
       if (im){
           if(flag){ f(... args); flag =false;
           }else {
               clearTimeout(timer);
               timer = setTimeout(() = >{ f(... args); flag =true
               }, t)
           }
       }else {
           // Non-immediate execution
           clearTimeout(timer);
           timer = setTimeout(() = >{ f(... args) }, t) } } }Copy the code

Where can we use function stabilization at the code level?

• When we send network hydrogen by liking, checking the input box, unliking, creating an order, etc., if we continuously click the button, we may send multiple requests. This is not allowed in the background.
• Each time the mouse resize/ Scroll triggers a statistical event.

Function of the throttle

The principle of function throttling is similar to that of function shuddering. Function throttling is that I only execute it once in a given period of time.

The first time is not immediately executed

export function throttle(f,t){
    let timer=true;
    return (. arg) = >{
        if(! timer){return;
        }
        timer=false;
        setTimeout(() = >{ f(... arg); timer=true;
        },t)

    }
}
Copy the code

In the effect, we clicked a lot, but only executed 4 times, because I set the time to execute at 1000ms. This also reduces the number of executions.

Execute the version immediately for the first time

export function throttleFirstExt(f, t) {
    let flag = true;
    return (. args) = > {
        if(flag) { f(... args); flag =false;
            setTimeout(() = > {
                flag = true
            }, t)
        }
    }
}
Copy the code

So here we see that the first click is executed immediately.

Merge version

export function throttle(f, t, im = false){
    let flag = true;
    return (. args) = >{
        if(flag){
            flag = falseim && f(... args)setTimeout(() = >{! im && f(... args) flag =true
            },t)
        }
    }
}
Copy the code

Application scenario:

• DOM element drag-and-drop implementation (Mousemove)
• Search lenovo (Keyup)
• Calculate the distance the mouse moves (mousemove)
• Canvas (Mousemove)
• Shooter mouseDown/KeyDown event (only one bullet fired per unit time)
• Automatically load more: After adding debounce to scroll, the scroll will determine whether the bottom of the page is reached only after the user stops scrolling. If you are throttling, you will judge it once in a while as long as the page scrolls.