防抖与节流

Posted 2020-12-12 mashuai666

函数防抖：触发高频时间后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。

函数节流：高频事件触发，一定时间内只能执行一次。(大白话：当高频事件触发时，第一次会立即执行，而后再怎么频繁地触发事件，只有等待上一次时间执行完了，才会再次触发。)

作用：函数防抖和函数节流都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。

1、防抖案例

//防抖案例：每次触发事件时都取消之前的延时调用方法
function debounce() {
    let timeout = null; // 创建一个标记用来存放定时器的返回值
    return function() {
        clearTimeout(timeout); // 每次触发事件都将上一次的延时器清除
        timeout = setTimeout(() => { // 然后又创建一个新的 setTimeout
            console.log(‘防抖‘)
        }, 1000);
    };
}
but.addEventListener(‘click‘, debounce());

2、节流案例

//节流案例：每次触发事件都判断之前的延时器是否执行完毕
function throttle(){
    var timer = null;//设定初始值为null
    return function(){
        if(!timer){//判断延时器是否执行完毕
            timer = setTimeout(() => {
                console.log(‘节流‘)
                timer = null;//执行完毕再设为null
            },1000)
        }
    }
}
but.addEventListener("click",throttle());

总结：

函数防抖：不管操作多少次，只在最后一次事件才触发函数。

函数节流：只有上一次触发的事件函数执行完毕，才能执行下一次的触发的事件函数。