还不会防抖和节流？看这篇就足够了

小嘟叨叨时刻

• 今天是11月30日，小嘟算算日子，小嘟也进入csdn两年多了。到今天，小嘟原创总计发布了74篇文章，阅读量也达到了2万多，感觉还是蛮开心的，嘿嘿嘿！

• 在写文章的过程中小嘟感觉还是蛮有意思的，感觉将`知识写出来，分享给读者，自己还蛮有成就感的。
• 小嘟的水平不高，所以大神们可以绕过，我的目的是帮助初学者和小白的。
• 临近考试，但是学习永远在路上，故此，小嘟为自己12月立个flag，
• 分享 >=10 篇文章
• 做>=10 道算法题
• 重新学习es6并做好笔记
  我是小嘟，一个爱叨叨的学习者...

本文中心

• 防抖和节流的概念
• 防抖节流的代码实现
• 防抖节流的实际应用
• 注:以下代码用到了一些es6中的语法，例如 ...、 默认赋值、 箭头函数。（小嘟在底部已经放好了相应的链接，请读者查阅，嘿嘿嘿）

第一部分（防抖篇）

防抖的概念

• 定义：事件发生后会在指定的n秒后触发回调函数，如果在这n秒内再次触发事件，那么将会重新计时。
• 什么意思呢？
• 容小嘟给读者举个例子，
• 假设：（1）事件：点击事件 （2）n：10
• 这个假设讲的就是在点击事件发生后，会在10s后执行回调函数，如果在这10s内又触发点击事件，那么将会以这次点击的时间为基准，在此时间上再过10s才会执行回调函数。
• 总结：点击多次，只会以最后一次的点击为有效点击。这个小嘟感觉和咱们高考有点类似，高考之前的考试都算演习，对我们来说都是无效的，考好了、考砸了其实也没啥，只有真正高考的考试才是最重要的（嘿嘿嘿，可能不是很具体，但是小嘟想说的意思表达出来啦）。
• 下来就直接看实现呗

防抖的实现

const deBounce = (fn,delay=60000,...values)=>{
     let timer = null;
     return ()=>{
         if(timer){
             console.log("我的参考时间被更新了，呜呜呜！");
             console.log("以我这次的点击时间为准：",Date())
             clearTimeout(timer);
         }
         timer = setTimeout(()=>{
             fn.apply(this,values);
         },delay)
     }
 }
 const sayDebounce = (...canshu)=>{
       console.log(canshu);
       console.log("我是防抖，你猜我防住了吗？",Date())
 }
 let testDebounce = document.querySelector('#btn')
testDebounce.onclick = deBounce(sayDebounce,5000,{"ages":123},1,2,3,555,"0000");

代码运行截图

防抖的应用场景

• 1.搜索框搜索输入。
  即在用户停止输入一段小时间后才会发送请求，如果在这一小段时间用户继续输入则重新计时。

• 2.窗口大小调节。
  窗口调整完成后一小段时间进行渲染，如果在这一小段时间内又进行了调整，则重新计时，直到计时结束进行渲染。

第二部分（节流篇）

节流的概念

• 定义：事件发生后会在一段时间间隔后执行回调函数，在该间隔内，触发事件被认为是无效的。
• 什么意思呢？请读者容小嘟慢慢道来。
• 假设：（1）事件：点击事件 （2）时间间隔：10s
• 假设我们这个事件是点击事件，时间间隔是10s，我们首次点击按钮，会触发一个回调函数，该回调函数会在10s之后执行，在这10s内的所有点击操作都被视为无效，也就是你点你的，我不理睬(鸟)你。这个就有点像王者荣耀里边的技能一样，你释放技能它有一个冷却时间，冷却时间也就是我们这里说的一段时间间隔，在冷却时间内，你再点击，它是不会再次释放技能的（除非王者出现bug或者冷却时间为0。这种都是小概率事件，由概率知识知，小概率事件也可以被认为是不可能事件😂😂😂）

节流的实现

const throttle = (fn,delay = 60000,...rest)=>{
      let timer = null;
      return ()=>{
          if(timer) {
              console.log("你来了就来了呗，我不理你",Date());
              return ;
          }
          console.log("我是第一次进来的",Date());
          timer = setTimeout(()=>{
              fn.apply(this,rest);
          },delay)
     }
}
const sayThrottle = (...ret)=>{
      console.log(ret);
      console.log("我真的节流了吗?确实节流了",Date());
}
let testThrottle = document.querySelector("#btn01");
testThrottle.onclick= throttle(sayThrottle,5000,{"name":"dream"},"小嘟","小囔");

代码运行截图

节流的应用场景

• 1.高频点击提交，表单重复提交
• 2.懒加载时要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率
• 3.做商品预览图的放大镜效果时，不必每次鼠标移动都计算位置。

文章回顾

附件

• rest参数(...)
  https://es6.ruanyifeng.com/#docs/function#rest-参数
• 函数的默认赋值 https://es6.ruanyifeng.com/#docs/function#函数参数的默认值
• 箭头函数 https://es6.ruanyifeng.com/#docs/function#箭头函数
• 应用场景参考 https://juejin.cn/post/6844903701514043400