Throttling and anti shake

Throttling and anti shake

effect ： Are born to save computer resources , That is, it belongs to optimization
principle ： Both use setTimeout To store the functions to be executed , It is very convenient to use its delay mechanism to determine the appropriate function trigger time .

throttle

Definition ： Only one task can be executed within the specified time interval
scene ： Lazy loading when loading pictures ,scroll Scroll bar timing

Realization ：

function throttle(fn, interval) {
    let canRun = true;
    return function () {
        if (!canRun) return;
        canRun = false
        setTimeout(() => {
            fn.apply(this, arguments)
            canRun = true
        }, interval)
    }
}

Shake proof

Definition ： When the task is triggered frequently , Only when the interval of task triggering exceeds the specified interval , The task will be performed , Its timing has an update
scene ： Judgment of user name input

Realization ：

function debounce(fn, interval) {
    let timeout = null;
    return function () {
        clearTimeout(timeout)// Clear the time of the previous trigger 
        timeout = setTimeout(() => {
            fn.apply(this, arguments)
        }, interval)
    }
}

end ！