防抖与节流

使用场景

我们经常使用dom里面的事件，例如查询滚动条的位置和输入框的内容，监听里面的动作并调用回调函数，但是一改变这些内容就会调用回调函数，调用回调函数如此之多，我们肯定不会让浏览器浪费在这些资源上面。

以监听滚动条位置为例，滚动滚动条并打印位置信息，仅仅滚轮滚动了一下就调用了如此之多的函数

一、防抖

能不能设置时间然后调用。这就是防抖了呀！

function debounce(fn,wait){
  let timer = null;
  return function(){
      clearTimeout(time)
      time = setTimeout(() => {
        fn()
      }, wait)
  }
}

二、节流。

节流顾名思义像水龙头一下慢慢地“调用”，像极了游戏里面技能冷却时间，就比如释放了一下技能10s能不可再次释放，节流就是调用了一次回调函数，特定时间内不可调用，直接返回false，时间结束后，方可调用。

 function throttle(fn,wait){
   let flag = true;
   return function(){
     //在技能冷却时间内不可使用
     if(!flag){
      return false
     }
     //如果技能可以使用，立即使用，使用完毕后，flag变为false。
     fn();
     flag = false;
     //设置定时器，等待技能冷却时间完毕后，可以使用技能。
     //也可以将fn的调用放入定时器内，原理一样。
     setTimeout(()=>{
        flag = true
     },wait)
   }
}