A brief discussion on JavaScript throttling and anti-shake

Throttling and anti-shake

concept:

the difference

Throttling Implementation

Throttling function

Anti-shake implementation

Anti-shake function
Anti-shake upgraded version

Summarize

Throttling and anti-shake

concept:

the difference

Throttling Implementation

Throttling function

Anti-shake implementation

Anti-shake function
Anti-shake upgraded version

Summarize

Throttling and anti-shake

Background : When we frequently request resources, interfaces, and other things, it will cause frequent Dom operations, high interface pressure, and so on, resulting in performance degradation. For example, sometimes I would suddenly hit the enter key every time I searched, and when the network connection was not very good, I would keep clicking the next page button. It might be because of the bad network or the low server performance.

In order to avoid frequently triggering the same event or request, throttling and anti-shake are used at this time.

what? What is this? When I first heard these two names, I thought they meant saving data traffic and preventing hand shaking. I was puzzled and started to learn immediately.

concept:

Simply put: throttling and anti-shake are two solutions to prevent events from being triggered multiple times in a short period of time. They all use the method of reducing the number of requests to reduce pressure and improve performance.

the difference

Throttling : Only one request will be made within a certain period of time.

It can be understood as: on a bus, each person is a click request, a bus runs every ten minutes, and a request is sent

Anti-shake : The function can be executed n seconds after the event is triggered. If the event is triggered within n seconds, the execution time will be recalculated.

For example, if I keep clicking a button for a period of time, a request will be sent based on the last click.

Throttling Implementation

Solution:

Using a timestamp (occurring at the beginning of a period of time) is to calculate

The current click time - the last time the function was executed > the timestamp I set, the function is executed once

Disadvantages: The first trigger is triggered directly, and the last trigger cannot be triggered within a period of time

Let's take a scenario where we search for data and initiate a request without doing any processing. The request must be too frequent.

insert image description here

Throttling function

Code:

<body>
    <div>
        <span>Throttling</span><input id="input" type="text">
        <button id="btn">Request</button>
    </div>
</body>
<script>
    var btn = document.getElementById("btn")
    btn.addEventListener("click", throttle(output, 1000)) //Add click event listener function output(e) {
        console.log(this, e)
        console.log(document.getElementById("input").value) //Simulate a request}
//Throttling function function throttle(fn, delay) { // fn is the function to be executed, delay is the delay time var last = 0; //The last end time return function () {
            var cur = Date.now()
            console.log(cur-last)
            if (cur - last > delay) {
                fn.apply(this, arguments) //Execute function last = cur //Update the last time}
        }
    }
</script>

Effect:

insert image description here

Anti-shake implementation

Solution:

Timer (occurs when the timer ends). Disadvantages: The first time does not trigger, the last time is delayed

It is to set a timer. If you keep clicking, the timer will be cleared and the last time the timer is turned on

Anti-shake function

Code:

<body>
    <div>
        <span>Anti-shake processing</span><input id="input" type="text">
        <button id="btn">Request</button>
    </div>
</body>
<script>
    var btn = document.getElementById("btn")
    btn.addEventListener("click", debounce(output, 1000)) //Add click event listener function output(e) {
        console.log(this, e)
        console.log(document.getElementById("input").value) //Simulate a request}
    function debounce(fn, delay) { // fn is the function to be executed, delay is the delay time var time = null; //timer return function () {
            clearTimeout(time); //Clear timer let context = this; //Get the current button context If not specified, the arrow function will always look out to find the window
            let args = arguments;
            time = setTimeout(() => {
                fn.apply(context, args);
            }, delay);
        }
    }
</script>

Effect:

insert image description here

Anti-shake upgraded version

First trigger and last delayed trigger

Code:

    function throttle(fn, delay) { // fn is the function to be executed, delay is the delay time let time = null
        let flag=true //Is it the first time to trigger return function () {
            clearTimeout(time)
            if (flag) { 
                fn.apply(this, arguments)
                flag=false
            }
            time = setTimeout(() => { //Trigger timer fn.apply(this, arguments)
                flag=true
            }, delay)
        }
    }

Effect:

insert image description here

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!

Throttling and anti-shake

In order to avoid frequently triggering the same event or request, throttling and anti-shake are used at this time.

what? What is this? When I first heard these two names, I thought they meant saving data traffic and preventing hand shaking. I was puzzled and started to learn immediately.

concept:

the difference

Throttling : Only one request will be made within a certain period of time.

It can be understood as: on a bus, each person is a click request, a bus runs every ten minutes, and a request is sent

Anti-shake : The function can be executed n seconds after the event is triggered. If the event is triggered within n seconds, the execution time will be recalculated.

For example, if I keep clicking a button for a period of time, a request will be sent based on the last click.

Throttling Implementation

Solution:

Using a timestamp (occurring at the beginning of a period of time) is to calculate

The current click time - the last time the function was executed > the timestamp I set, the function is executed once

Disadvantages: The first trigger is triggered directly, and the last trigger cannot be triggered within a period of time

Let's take a scenario where we search for data and initiate a request without doing any processing. The request must be too frequent.

insert image description here

Throttling function

Code:

<body>
    <div>
        <span>Throttling</span><input id="input" type="text">
        <button id="btn">Request</button>
    </div>
</body>
<script>
    var btn = document.getElementById("btn")
    btn.addEventListener("click", throttle(output, 1000)) //Add click event listener function output(e) {
        console.log(this, e)
        console.log(document.getElementById("input").value) //Simulate a request}
//Throttling function function throttle(fn, delay) { // fn is the function to be executed, delay is the delay time var last = 0; //The last end time return function () {
            var cur = Date.now()
            console.log(cur-last)
            if (cur - last > delay) {
                fn.apply(this, arguments) //Execute function last = cur //Update the last time}
        }
    }
</script>

Effect:

insert image description here

Anti-shake implementation

Solution:

Timer (occurs when the timer ends). Disadvantages: The first time does not trigger, the last time is delayed

It is to set a timer. If you keep clicking, the timer will be cleared and the last time the timer is turned on

Anti-shake function

Code:

<body>
    <div>
        <span>Anti-shake processing</span><input id="input" type="text">
        <button id="btn">Request</button>
    </div>
</body>
<script>
    var btn = document.getElementById("btn")
    btn.addEventListener("click", debounce(output, 1000)) //Add click event listener function output(e) {
        console.log(this, e)
        console.log(document.getElementById("input").value) //Simulate a request}
    function debounce(fn, delay) { // fn is the function to be executed, delay is the delay time var time = null; //timer return function () {
            clearTimeout(time); //Clear timer let context = this; //Get the current button context If not specified, the arrow function will always look out to find the window
            let args = arguments;
            time = setTimeout(() => {
                fn.apply(context, args);
            }, delay);
        }
    }
</script>

Effect:

insert image description here

Anti-shake upgraded version

First trigger and last delayed trigger

Code:

    function throttle(fn, delay) { // fn is the function to be executed, delay is the delay time let time = null
        let flag=true //Is it the first time to trigger return function () {
            clearTimeout(time)
            if (flag) { 
                fn.apply(this, arguments)
                flag=false
            }
            time = setTimeout(() => { //Trigger timer fn.apply(this, arguments)
                flag=true
            }, delay)
        }
    }

Effect:

insert image description here