js节流和防抖

js节流和防抖

• 函数防抖
  当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定时间到来之前，又触发了事件，就重新开始延时。也就是说当一个用户一直触发这个函数，且每次触发函数的间隔小于既定时间，那么防抖的情况下只会执行一次。

/**
 * @function antiShake 函数防抖
 * @param {Function} fn 需要防抖的函数
 * @param {Number} interval 间隔时间
 * @return {Function} 经过防抖处理的函数
 * */
const antiShake = (fn, interval) => {
    let timer = null; // 定时器
    return () => {
        clearTimeout(timer); //重点： 清除，重新执行
        ...
        // 开启倒计时定时器
        timer = setTimeout(function() {
            ...
        }, interval || 300)
    }
}

• 函数节流

当持续触发事件时，保证在一定时间内只调用一次事件处理函数，意思就是说，假设一个用户一直触发这个函数，且每次触发小于既定值，函数节流会每隔这个时间调用一次。

/**
 * @function throttle 函数节流
 * @param {Function} fn 需要节流的函数
 * @param {Number} interval 间隔时间
 * @return {Function} 经过节流处理的函数
 * */
function throttle(fn, interval) {
    let timer = null; // 定时器
    let flag = true; // 需要立即执行则加flag，判断是否是第一次执行
    // 利用闭包
    return function() {
        // 第一次执行的话
        if(flag ) {
            ...
            flag = false;
        }
        if(timer) return; // 重点：正在执行直接return
        timer = setTimeout(function() {
            ...
            timer = null; // 清除之前的定时器
        }, interval || 300)
    }
}

区别：
用一句话总结防抖和节流的区别：防抖是将多次执行变为最后一次执行，节流是将多次执行变为每隔一段时间执行。
更多面试题、常用开发技巧、经典题型关注微信小程序“前端无人区”