函数防抖和节流区别

今天旁边刚毕业同事的问我函数节流和防抖到底怎么简单区分概念， 突然一下哽住了忘记怎么回答了。现在刚回家好好理一下。

函数防抖和函数节流区别

其实很简单， 举例：一个button如果绑定了函数防抖并且时间设置为3秒钟， 如果快速不停的点击按钮回调事件不会触发只有两次点击的间隔超过3秒后才会触发。 如果button绑定的是函数节流时间设置也是3秒钟，此时快速不停的点按钮， 回调函数还是会3秒触发一次。
总结： 函数防抖每次点击后会重新计时。 函数节流不会重新计时，时间到了就会触发

函数防抖封装实现方法 （拷贝直接用）

// 三个参数      回调函数  延迟时间   第一次是否立即触发
function debounce(fn, delayTime, triggleNow) {
    let t = null,
        // 如果被包装的函数有返回值
        res;
        // 返回一个debounced函数
    let debounced =  function () {
        clearTimeout(t);
        let self = this,
            // 如果返回的函数需要进行参数传递
            arg = [].splice.call(arguments);

        // 重点： 每次需要清除t, clearTimout不会把t 变为null会保留计时器的id
        if (t) {
            clearTimeout(t);
        }

        // 第一次需要立即触发
        if (triggleNow) {
            // 第一次进入 t = null !t 为 true;
            let exec = !t;
            // 延时1秒后重新把t赋值为null,再次进入后又可以立即触发了
            // 如果这个计时器没有走完的情况下exec永远是false
            t = setTimeout(() => {
                t = null;
            }, delayTime);

            if (exec) {
               res = fn.apply(self, arg);
            }
        } else {
            // 不需要立即触发
            t = setTimeout(() => {
                // 如果triggleNow不立即触发 则进入异步不能立即返回结果undefined
                res = fn.apply(self, arg);
            }, delayTime)
        }
        return res;
    }
    
    // 给函数添加一个方法清除防抖
    debounced.removeDe = function () {
        clearTimeout(t);
        t = null;
    }
    return debounced
}

函数防抖使用场景

函数节流上次已经写过了，这里不再赘述。

1. 发送请求的时候可以防止连续点击不停发送， 减少http请求
2. 输入框可以防止不停输入不停的发送请求