何为防抖，何为节流 in JavaScript

刚听到这两个词的时候，我是一脸萌的，这啥啊这是，js还有这玩意，直到我认真了解了一下之后，哇哦，原来是这个样子的呢，今天就来给大伙们讲讲何为防抖何为节流。
下面，正片开始：

函数防抖(debounce)

当做随着输入框输入不同内容展示不同的结果列表类似需求时，一般会绑定input的change事件，该事件在用户输入过程中会多次被触发，这时可以用防抖处理一下 debounce(fn,time)，可以保证在用户输入完time时间后才触发fn。这里不用 throttle，因为debounce更加符合

举个栗子：

function debounce(fn,time,imediate) {
    let timer = null;
    return function() {
        const args = arguments;
                const _this = this;
                const callNow = imediate && !timer
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(()=>{
            timer = null;
        },time)
                if(callNow){
                        fn.apply(_this,args);
                }
    }
}

节流（throttle）

当给document加scroll事件时，假定处理函数为fn，那么当滑动鼠标时scroll事件会不断的被触发，影响滑动性能，这时可以用节流处理一下 throttle(fn，time)，可以保证fn在time时间内只触发一次
栗子：

function throttle(fn,time,imediate) {
    let timer = null;
    return function() {
        const args = arguments;
                const _this = this;
                const callNow = imediate && !timer
        if (timer) {
            return;
        }
        timer = setTimeout(()=>{
            timer = null;
        },time);
                if(callNow){
                        fn.apply(_this,args);
                }
    }
}

区别

节流强调的是m秒内函数最多触发一次，注意这里的用词最多，也就是可能不触发，一般第一次和最后一次可能不会触发；
防抖强调的是函数两次调用的间隔必须大于m秒，如果函数触发的频率一直小于m秒，那么只有最后一次才会触发函数执行。

结合应用场景

debounce

• search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
• window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次

throttle

• 鼠标不断点击触发，mousedown(单位时间内只触发一次)
• 监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断