函数节流和函数去抖

debounce 应用场景

函数去抖就是对于一定时间段的连续的函数调用，只让其执行一次。

• 每次 resize/scroll 触发统计事件
• 文本输入的验证（连续输入文字后发送 AJAX 请求进行验证，验证一次就好）

/**
* 简单模拟debounce
* @param fn
* @param delay
* @returns {Function}
*/

debounce = function (fn, delay) {
   let timer = undefined
   return function () {
       if(timer!==undefined){
           window.clearTimeout(timer)
       }
       timer =setTimeout(()=>{
           fn.call()
           timer = undefined
       },delay*1000)
   }
}
var f1 = debounce(()=>{
   console.log(1)
},3);

throttle 应用场景

函数节流的核心是，让一个函数不要执行得太频繁，减少一些过快的调用来节流。

哪些时候我们需要间隔一定时间触发回调来控制函数调用频率？

• DOM 元素的拖拽功能实现、计算鼠标移动的距离、Canvas 模拟画板功能（mousemove）
• 射击游戏的 mousedown/keydown 事件（单位时间只能发射一颗子弹）
• 搜索联想（keyup）
• 监听滚动事件判断是否到页面底部自动加载更多：给 scroll 加了 debounce 后，只有用户停止滚动后，才会判断是否到了页面底部；如果是 throttle 的话，只要页面滚动就会间隔一段时间判断一次（scroll）

/**
 * 简单模拟throttle
 * @param fn
 * @param delay
 * @returns {Function}
 */
throttle=function (fn, delay) {
    let cd =false;
    return function () {
        if(cd){return}
        fn.call()
        cd=true
        console.log(new Date())
        setTimeout(()=>{
            cd =false
        },delay*1000)
    }
};
var f2=throttle(()=>{
    console.log(2)
},3);

总结

函数节流和函数去抖的核心：限制某个方法被频繁触发，而一个方法之所以会被频繁触发，大多数情况下是因为 DOM 事件的监听回调，而这也是函数节流以及去抖多数情况下的应用场景