加强版的throttle

Posted 2021-09-10 HeiYanjing

节流
trottle:在某段时间内，不管你触发了多少次回调，我都只认第一次，并在计时
结束时给予响应。所谓的“节流”，是通过在一段时间内无视后来产生的回调请求来实现的.
防抖
debounce:在某段时间内，不管你触发了多少次回调，我都只认最后一次。时间到了就执行回调。

存在的问题：
debounce 太有耐心了。如果用户的操作十分频繁，他每次都不等debounce 设置的 delay 时间结束就进行下一次操作，于是每次 debounce 都为该用户重新生成定时器，回调函数被延迟了不计其数次。频繁的延迟会导致用户迟迟得不到响应，用户同样会产
生“这个页面卡死了”的观感。
希望的结果：
如果delay 时间内，我可以为你重新生成定时器；但只要delay的时间到了，我必须
要给用户一个响应。

throttle(fn,delay){
   let last =0;  // 上⼀次触发回调的时间
   let timer = null; 
   return ()=>{
      let context = this;
      let args = arguments;
      let pre = Date.now();
      // 判断上次触发的时间和本次触发的时间差是否⼩于时间间隔的阈值
      if(now -pre < delay){
       //  如果时间间隔⼩于我们设定的时间间隔阈值，则为本次触发操作设⽴⼀个新的定时器
         clearTimeout(timer);
         timer  = setTimeout(()=>{
              last = now;
              fn.apply(context,args);
         },delay);
      }else{
      // 如果时间间隔超出了我们设定的时间间隔阈值，那就不等了，⽆论如何要反馈给⽤户⼀次响应
         last = now;
         fn.apply(context,args);
      }
   }
}

const myscroll = throttle(()=>{console.log(\'scroll\')},1000);