Implementation and usage scenarios of JS anti-shake throttling function

1. What is Function Anti-shake?

Concept: Function debounce means that after an event is triggered, a function can only be executed once within n seconds. If another event is triggered within n seconds after the event is triggered, the function execution delay time will be recalculated.

1. Why do we need function anti-shake?

During the front-end development process, there are some events, such as onresize, scroll, mousemove, mousehover, etc., which will be triggered frequently (multiple times in a short period of time). If there is no limit, it is possible to execute dozens or hundreds of times within one second. If other functions are executed inside these functions, especially functions that operate DOM (browser operations on DOM are very performance-intensive), it will not only waste computer resources, but also slow down the program and even cause the browser to freeze or crash.

2. Key points of function anti-shake

The key point of function de-shaking is that a setTimeout is needed to assist in the implementation and delay the execution of the code to be executed. If the method is triggered multiple times, the delayed execution code recorded last time is cleared with clearTimeout and the timing starts again. If the event is not re-triggered during the timing period, the target code will be executed after the delay time is completed.

3. Implementation of function anti-shake

//HTML part <div>
    Account: <input type="text" id="myinput">
</div>

//JS part function debounce(fun,wait=1500){//ES6 syntax wait=1500 sets the default value of the parameter. If wait is not entered, 1500 will be used.
        let timeout = null
        return function(){
            if(timeout){//If a timer exists, clear it clearTimeout(timeout)
            }
            timeout = setTimeout(function(){
                fun()
            },wait)
        }

    }
function testUname(){
    console.log("End of input!")
}
document.getElementById('myinput').addEventListener('input',debounce(testUname,1000))

The above code is a simple application of the anti-shake function. As long as the interval between each input is greater than one second, the "Print input end!" will never be displayed until you stop inputting. This is because each input will clear the previous timer.

Do you think it’s over after reading this? Don't worry, let's continue watching:

//HTML part <div>
    Account: <input type="text" id="myinput">
</div>

//JS part function debounce(fun,wait=1500){
        let timeout = null
        return function(){
            console.log(this) //<input id="myinput" type="text">
            console.log(arguments) // Arguments { 0: input, … }
            if(timeout){//If a timer exists, clear it clearTimeout(timeout)
            }
            timeout = setTimeout(function(){
                console.log(this) //Window
                console.log(arguments) // Arguments { … }
                fun()
            },wait)
        }

    }
function testUname(){
    console.log("End of input!")
}
document.getElementById('myinput').addEventListener('input',debounce(testUname,1000))

Whether it is anti-shake or throttling, we have to solve two problems, this pointing and arguments.

If there is no special reference, this in the callback functions of setInterval and setTimeout refers to window. This is because the JS timer method is defined under window. This is obviously not what we want, because we are monitoring the input input box, so we want this in the timer to point to input.

So is there any way to change what this points to?

A simple way is that we can use parameters to save the this and arguments of the timer outer function. Then use apply to change the direction of the function fun to be executed by the timer.

//JS part function debounce(fun,wait=1500){
            let timeout = null
            return function(){
                let _this = this
                let arg = arguments
                if(timeout){//If a timer exists, clear it clearTimeout(timeout)
                }
                timeout = setTimeout(function(){
                    console.log(_this) //<input id="myinput" type="text">
                    console.log(arg) // Arguments { 0: input, … }
                    fun.apply(_this,arg)
                },wait)
            }
         
        }

Of course, you can also use the new feature of ES6 arrow function: the this of arrow function always points to the this when the function is defined, not when it is executed. Arrow functions need to remember this sentence: "There is no this binding in the arrow function, and its value must be determined by looking up the scope chain. If the arrow function is included by a non-arrow function, this is bound to the this of the nearest non-arrow function, otherwise, this is undefined."

So you can also write:

//JS part function debounce(fun,wait=1500){
            let timeout = null
            return function(){
                if(timeout){//If a timer exists, clear it clearTimeout(timeout)
                }
                timeout = setTimeout(()=>{
                    console.log(this) //<input id="myinput" type="text">
                    console.log(arguments) // Arguments { 0: input, … }
                    fun.apply(this,arguments)
                },wait)
            }
         
        }

4. Usage scenarios of function anti-shake

In what situations is function anti-shake generally used? It is generally used when continuous events only need to trigger a callback once. Specifically:

• Search box searches for input. Just wait until the user finishes inputting for the last time before sending the request;
• User name, mobile phone number, and email input verification;
• When the browser window size changes, just execute the code in the resize event after the window is adjusted to prevent repeated rendering.

2. What is function throttling

Concept: Limit a function to be executed only once within a certain period of time.

For example, when you are taking a train or subway and going through security check, only one passenger is allowed to pass through the security check entrance within a certain period of time (for example, 10 seconds) to cooperate with the security personnel to complete the security check. In the above example, only one passenger is allowed to pass every 10 seconds. From analysis, we can see that the key point of "function throttling" is to limit an action to only be executed once within a certain period of time.

1. Key points of function throttling

The main implementation idea is to use the setTimeout timer. By setting the delay time, create a timer when it is called for the first time, set a variable first, assign the timer to this variable, and then write the function to be executed. When this function is executed for the second time, it will determine whether the variable is true, and return if it is. When the first timer executes the function, the variable will be set to false. Then the next time the variable is judged, it will be false, and the functions will run in sequence. The purpose is to ensure that only the last call of multiple function requests is executed within a certain period of time.
Is it a bit confusing to look at it this way? Let's look at the code:

2. Implementation of function throttling

//JS part function debounce(fun,wait=1000){//Timer solution let timer = null;//Set a variable first return function(){
                if(!timer){//If timer is null, enter timer = setTimeout(function(){//Then assign the timer to this variable fun()//Then write the function to be executed timer = null//The first timer executes the function and finally sets the variable to false. Here timer = null has two functions: 1. Open the next entry, 2. Clear the subsequent timer})

                }
            }
        }
function testUname(){
    console.log(Math.random())
}
document.getElementById('myinput').addEventListener('input',debounce(testUname))

Similarly, the throttling function also needs to solve the problem of this and arguments. The improvement is as follows:

//Arrow function writing function debounce(fun,wait=1000){
            let timer = null
            return function(){
                if(!timer){
                    timer = setTimeout(()=>{
                        fun.apply(this,arguments)
                        timer = null
                    },wait)

                }
            }
}
//Parameter preservation method function debounce(fun,wait=1000){
        let timer = null
        return function(){
            let _this = this
            let arg = arguments
            if(!timer){
                timer = setTimeout(function(){
                    fun.apply(_this,arg)
                    timer = null
                },wait)

            }
        }
}

3. Usage scenarios of function throttling

So far, I believe you should have a more detailed understanding of function throttling. So in what situations is function throttling generally used?

• Lazy loading, scroll loading, load more or monitor the scroll bar position;
• Baidu search box, search association function;
• Prevent high-frequency click submission and repeated form submission;

Summarize

This concludes this article on the implementation and usage scenarios of JS anti-shake throttling function. For more relevant JS anti-shake throttling function content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!