关于防抖与节流的思考

百度防抖与节流，一直没搞懂防抖与节流的区别，然后google了一下，（google大法好

 _(:з」∠)_）个人理解了一下

  1，比较正式的解释他们的区别：

          防抖：就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间，防抖注重结果

           节流：:是让一个函数无法在很短的时间间隔内连续调用，当上一次执行完之后过了规定的时间间隔，才能进行下一次的函数调用，节流注重过程

  2，非官方解释

          节流：A打了一个B一下，B开始哭（假设哭5分钟），在这5分钟内A一直打，而B就只为哭A打的第一下，其他的从第二次开始，B就像练了金钟罩一样，抗打ƪ(˘⌣˘)ʃ，但是这5分钟过了之后金钟罩没了，需要A重新打一次，让B哭出来才重新生成金钟罩

          防抖：A打B（假设时间点7:00），B在 5五分钟后开始哭（B反射弧太长了）(7:05)，如果A距离上一次打B的时间小于5分钟（假设2分钟）（7:02），那么B将在7:07而不是7:05开始哭，如果A每次打距离上一次打都小于5分钟，那么B由此可见会在最后一次打的5分钟后开始哭

  3，应用场景

         防抖：搜索时需要根据输入框中的内容发送ajax请求时

         节流：窗口尺寸大小改变时，滚动到底部事件时

 4，程序实现：

// 防抖
   let time;
   let per = 200; //这个是间隔时间，即事件触发到事件回调开始执行的间隔时间。根据业务需求决定
    function throtting(){
     if(time){
   clearTimeout(time);
     time =null;//time不会因为clearTimeout而置为空
}
    time = setTimeout(function(){
   //事件回调的具体方法

},per)

}
//节流
   let timelength=2000;//即在2秒内自第二次开始的其他事件触发都将被忽略
   let lasttime = null;//上一次执行的时间点
   function debounce(){
     if(!lasttime){
lasttime = new Date().getTime()
   }else{
     let curenttime=new Date().getTime();
    if(curenttime - lasttime>2000){
 //事件回调的具体方法
   //需将上一次的时间更新↓
     lasttime = curenttime 

}else{
  //时间不够，不做任何操作
return false

}

}
     

}