防抖和节流

一、什么是防抖

防抖是当事件被触发后，延迟n秒后再执行回调，如果再这n秒内事件又被触发，则重新计时，等于游戏中的回城。

二、防抖使用场景

1.输入框是按键触发请求时

用户连续输入一串字符时，可以通过防抖策略，只在输入完后，才执行查询的请求，这样可以有效减少请求次数，节约请求资源，
代码：

var time = null   
  //定义一个要发生的数据
  getdata(data){
  //data是发送的数据
    //发送请求
}
//防抖的timer

//定义防抖的函数，调用这个函数后，会设置一个定时器
//request是发送请求的函数。
function fn(keword,request){
//keword是你要传递的参数
//request是你发送请求的函数名
//开启定时器后，会返回一个定时器的id，可以接受这个id，清除的时候也是根据这个id来清除的。
   time = setTimeout({
   //发送请求
    request(keword)
}，500)
}

input.keyup = function(){
     clearTimeout(timer)
     fn(keywords,getdata)
     //keywords是用户输入的值
}
//给输入框绑定事件
//按键抬起后触发， 先清除定时器，

缓存你的输入
1.定义一个全局的缓存对象
var cacheobg = {}
2.将搜索结果保存到缓存对象中

function  fn2(data){
   var a =   input.value
   //获取输入的内容当中键
   cacheobg [a]  = res
   //把结果和键名对应。
   //这样用户输入到这个内容时，就会对应到这个数据
   //然后显示出来。
   //这样就可以不用发送请求。直接获得数据。
}

三、什么是节流

节流就是减小一段实际内事件的触发频率，按下之后，后续的按下或输入都不会再执行，只能触发第一次的事件，必须等第一件事执行完后，才能执行下一次的事件。

//vue中的场景，time是data里的变量
cleartime(){
      //第一步是清除定时器，
       clearTimeout(this.time)
      //第二部要把存定时器的值清空，不然还存着定时器的那个id
      this.time = null
    },
     //请求函数
    getdata(){
     //如果定时器存在，则退出函数
    if(this.time){
      return
    }
    //不存在就创建一个定时器
      this.time = setTimeout(()=>{
       //用箭头函数this是vue
       //不用箭头函数，this是window
       //执行你的逻辑。

       //之后执行清空定时器函数在上面
        this.cleartime()
      },3000)
   
        }

自行封装可以更简便

四、节流的使用场景

1.鼠标连续点击触发事件

只在单位时间内触发一次。

2.懒加载时要监听计算滚动条的位置

但不必每次滑动都触发，可以降低计算的频率，而不必浪费cpu资源

五、节流阀的概念

节流阀为空，表示可以执行下次操作， 不为空，就不能执行下次操作。
当前操作执行完，必须将节流阀重置为空，表示可以执行下次操作。
每次执行前，必须先判断节流阀是否为空，不为空就直接return出去。

即就是防抖的代码不是去除定时器，而是判断定时器，存在就不会执行了，不存在定时器就会执行后面的代码。

六、防抖和节流的区别

防抖：事件被频繁的触发，防抖能保证只有最后一次触发生效，前面n多次的触发都会被忽略，
节流:如果事件被频繁触发，节流能够减少事件触发的频率，因此，节流是有选择性的执行一部分事件