防抖和节流以及应用场景

函数防抖（debounce）

就是指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间。
n 秒后再执行该事件，若在 n 秒内被重复触发，则重新计时

function debounce(fn,wait){
    var timer = null;
    return function(){
        if(timer !== null){
            clearTimeout(timer);
        }
        timer = setTimeout(fn,wait);
    }
}
   
function handle(){
    console.log(Math.random());
}
window.addEventListener("resize",debounce(handle,1000));

应用场景：比如一个输入框，边输内容边调接口做模糊查询，只要按下键盘，就会触发ajax请求。这样会增加很多无效的请求浪费资源，实际应用中，是等用户输出完整的字符后才会请求
加入了防抖以后，当频繁的输入时，并不会发送请求，只有在指定间隔内没有输入时，才会执行函数。如果停止输入但是在指定间隔内又输入，会重新触发计时。
还有window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次

函数节流(throttle)

概念：n 秒内只运行一次函数，若在 n 秒内重复触发，只有一次生效

// 节流
function throttle(callback, wait) {
   // 上一次点击的时间
   let lastTime = 0;
   return function () {    // 如果不return的话会立即执行，return的话就是点击才会调用此方法
     // 获取当前点击的时间
    let nowTime = new Date().getTime()
    // 判断当前点击的时间 - 上一次点击的时间  是否  大于1秒
     if (nowTime - lastTime > wait) {
         callback();
         // 把当前点击的时候  赋值给上一次的时间
         lastTime = nowTime;
     }
    }
}

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

总结：
函数防抖和函数节流都是防止某一时间频繁触发，但原理不一样。

函数防抖是n秒后执行一次，若n秒内重复触发，则重新计时
函数节流是n秒内执行一次，若n秒内重复触发，只有一次生效，下次再过n秒执行
函数防抖是某一段时间后才会执行一次，而函数节流是间隔时间执行一次