takeaway

1. To understand what closures do,This is important
2. Learn how to use Apply

Function debounce

The callback is executed n seconds after the event is triggered. If it is triggered again within n seconds, the timer is reset and the time is calculated before the callback is executed.

Example in life: someone enters the elevator, the elevator will automatically close after 5 seconds, if someone enters the elevator again within 5 seconds, the elevator will re-time and automatically close.

function debounce(fn, delay = 5000) {
    // Timer is in the closure
    let timer = null;
    function func () {
        // Each entry will clear the timer in the closure, which can be understood as everyone enters the elevator, to cancel the last elevator closing action.
        if (timer) {
            clearTimeout(timer)
        };
        // Create timer, it can be understand that the person enters the elevator, press the close button, the elevator will close 5 seconds later
        timer = setTimeout(() = > {
            // The passed fn function is not executed again for 5 seconds
            fn.apply(this.arguments)
            // Empty the timer
            timer = null
        }, delay);
    };
    return func
};
Copy the code

Function throttle

The callback function is executed only once in n seconds, executed first and then evaluated.

Example in life: when playing plane wars, click the screen to fire bullets repeatedly, even if the frequency of clicking the screen is fast, the bullets are fired at an average interval.

function throttle(fn, delay = 1000) {
    // also a timer in a closure
    let timer = null;
    return function () {
        // Issue the command to fire a bullet after one second. If the command exists, no more commands will be accepted
        if (timer) {
            return
        };
        // Issue the command, fire the bullet one second later
        timer = setTimeout(() = > {
            // Execute the shot
            fn.apply(this.arguments);
            // After the bullet is fired, the command is clear so that it can accept the next command
            timer = null;
        }, delay);
    };
};
Copy the code

There is feedback that function throttling is a bit difficult to understand, so let me write an easy to understand example

function throttle(fn, delay = 1000) {
    // Start time and finish time
    let activeTime = 0;
    return function() {
        // The time node to execute the throttling function
        const currentTime = Date.now();
        // Time of execution - time of last comparison > control throttling gap
        if (currentTime - activeTime > delay) {
            // Execute the function only when the throttling gap is met
            fn.apply(this.arguments);
            // Reset the execution point to the current time for the next comparison
            activeTime = Date.now()
        }
    }
};
Copy the code

summary

I hope after reading this article you can have the following help:

• Understand the realization principle of function anti – shake and throttling.
• The optimization is realized by using function anti-shake and throttling in practical projects.

If there are any mistakes in this article, please correct them in the comments section. If this article has helped you, please like it and follow it.

Previous content recommended

1. Deep copy
2. Easily understand the JS prototype prototype chain
3. New operator
4. Handwritten bind/call/apply
5. Closures and scopes