什么是防抖和节流？有什么区别？如何实现？

Question

节流函数（每调用一次后在规定的时间 wait 内不可再次调用）

function throttle(callback,wait){
    let last = Date.now();
    return function(...args){
        if((Date.now() - last) > wait){
            callback.call(this,...args);
            last = Date.now();
        }
    }
}

• 鼠标的点击事件，比如 mousedown 只触发一次
• 监听滚动事件，比如是否滑到底部自动加载更多，用 throttle 判断
• 比如游戏中发射子弹的频率(1 秒发射一颗)

防抖函数（在事件被触发 n 秒后再执行回调，如果在这 n 秒内又被触发，则重新计时）

function debounce(callback, delay){
    let timer = null;
    return function(...args){
        if(timer) clearTimeout(timer);
        timer = setTimeout(function(){
            callback.apply(this, args);
        },delay)
    }
}

• search 搜索，用户不断输入值时，用防抖来节约 Ajax 请求,也就是输入框事件 。
• window 触发 resize 时，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次