防抖&节流学习 - 2｜ 青训营笔记

Throttle

(注：如果是从这一部分看的话，有不懂的地方，可以看看之前的部分，相信会有帮助)

和Debounce是比较相似的，包括在使用场景上也有很多相似的地方，所以它们总是被放在一起讨论，但它们之间还是有些不同之处的

1. 定义：

   一段时间内，多次连续地对函数的调用，只有一次会被允许，其它地调用则不会被允许。(注意这里 是否允许 不是Debounce中提到的将多次调用合并为一次有效的调用。即在Debounce中每次调用都会被执行，但有效的执行只用一次；而在Throttle中只有一次调用会被允许，而其它的不被允许)

2. 那它一般被用在什么场景捏？

   常被用在Infinite Scroll (无限滚动) 场景，比如说像信息流，段视频等网站中不断地向下滚动，当滚动到底部时 / 浏览完当前可用信息时，则会自动加载新的 信息 / 内容，我们只想它这次加载合适量的信息 (请求一次信息，不是请求多次请求导致返回过多的信息)，当用户浏览完新加载的信息后，则再次加载和适量的信息 ...

3. 那最简单，最基本实现它的方法是什么捏？

   实现方式⬇️：

   const throttle = (fn, delay) => {
       let last = 0;
       return (...args) => {
           const now = Date.now();
           if(now - last < dalay) {
               return;
           }
           last = now;
           return fn(...args);
       }
   }
   

   • 先看看最外层

     throttle函数接受两个参数，fn - 将要被执行的函数，delay - 制定多长时间内至多执行一次

   • 然后再看看内层

     使用闭包记住上次被调用的时间 (last变量)

   • 再往内看看

     now变量获取当前调用的时间，与上次调用的时间做对比，有两种情况

     1. 若时间仍小于delay时间，则不执行调用
     2. 若时间大等于delay时间，则刷新上次调用的时间 (变量 last 设为 当前now的时间)，调用函数，并返回结果