JS基础之函数防抖

javaScript

防抖本质上是连续触发的时间段内只允许响应一次。可立即执行也可非立即执行。
节流则是单位时间内响应一次。可立即执行也可非立即执行。

防抖

分为两种方式，一种是立即执行，一种是非立即执行。看场景选择不同的需求。

（非立即执行版）防抖动的理解：防抖动就是，只要乘客不断地在刷卡，司机师傅就不能开车，等着乘客都上车了，再过一个特定的等待时间，才能启动。

/**
 * 防抖函数，返回函数被连续调用时，空闲时间必须大于或等于 delayMilliSec, fn 才会执行
 *
 * @param  {function} fn             回调函数
 * @param  {number}   delayMilliSec  表示时间窗口的间隔
 * @param  {boolean}  isImmediate    设置为ture时，立即调用函数
 * @return {function}                返回客户调用函数
 */
function debounce( fn, delayMilliSec = 1000, isImmediate = true){
    let timerId;
    return function(...args){
        let context = this;
        timerId && clearTimeout(timerId);
        if(isImmediate){
            if(!timerId) fn.apply(context, args);
            timerId = setTimeout(()=> { timerId = null}, delayMilliSec);
        }else {
            timerId = setTimeout(()=> {
                    fn.apply(context, args);
                }, delayMilliSec);
        }
    }
}

值得注意的几个点：

• this 的引用
• 参数的正确传递（args）
• 只有在立即执行的情况下，才会有返回值，非立即执行的时候返回值为undefined。
• 可以自己增设一个随时取消的按钮。

防抖和节流的不同之处在于：是否在触发的时候，取消计时器。