《看完就懂系列》天哪！搞懂节流与防抖竟简单如斯~

写在前面

今天来谈一谈

节流与防抖

，这是一个老生常谈的概念，实际应用也特别多，面试中经常会问到。可还是有很多初学者不明白，搞不懂两者之间的区别，或者两者的概念与实际应用中的差别（比如我刚接触的时候就是搞不明白这两个绕来绕去的概念）。其实明白之后就豁然开朗，觉得很简单了。所以今天我们来谈一下这个节流与防抖，争取给它重新谈出花样来。

防抖篇

*防抖小故事

小熊早上去找小虎玩，到了小虎家门口，小熊准备一直摁门铃吵醒小虎，所以小熊一直摁门铃，可是门铃一次也没有响。小熊以为门铃坏了，于是停止摁门铃，过了一会儿门铃响了。小虎在屋里嘿嘿一笑：我的门铃可是做了

防抖

操作呦，一直摁只有最后一次才会响。

*防抖逻辑图

*防抖代码实现

函数防抖代码的实现一般是根据

setTimeout

来实现。每次进入都会去执行

setTimeout

，但是如果已经有

setTimeout

在执行，则会先销毁执行的

setTimeout

，再创建一个新的

setTimeout

。保证只有一个

setTimeout

并且在指定时间后执行。

以滚动结束后3s后触发处理函数为例：

 // 防抖初始变量
 let debouncTtimeout
 // 点击防抖按钮触发函数
 function debounce() {
 clearTimeout(debouncTtimeout)
 debouncTtimeout = setTimeout(function () {
 console.log("执行防抖操作啦~")
 }, 3000)
 }


节流篇

*节流小故事

第二天小虎去找小熊玩，到了小熊家门口，小虎也准备一直摁门铃吵醒小熊，但是门铃只“叮叮叮~”响了一次，就不再响了，小虎一直摁，摁了好一会儿，门铃又响了一次，就又不再响了。小熊在屋里嘿嘿一笑：我的门铃可是做了

节流

操作呦~

*节流逻辑图

*节流代码实现

函数节流实现思路是：设置一个初始时间和固定的时间，在固定时间内只会触发一次。触发函数前先对比和初始时间间隔是否大于固定时间，如果两次出发函数的时间间隔大于固定时间，才会触发函数，触发之后初始时间改为触发函数时的时间。实现方法可以使用时间戳和定时器，明白了思路，方法都是大同小异的。

以滚动过程每3s触发一次处理函数（时间戳方法）为例：

 // 节流初始时间戳
 let pastDate = new Date().valueOf()
 // 点击节流按钮触发函数
 function throttle() {
 let nowDate = new Date().valueOf()
 if (nowDate - pastDate > 3000) {
 console.log('执行节流操作啦~')
 pastDate = new Date().valueOf()
 }
 }


总结

函数防抖：

 持续点击只有最后一次才触发函数。例如用户滚动页面选点，当用户停止滚动操作才需要触发。

函数节流：

 一定时间内只触发一次函数。例如表单提交按钮，用户可能会多次点击，造成多次发送数据，我们需要让用户每3s内的所有点击只生效一次。

写在后面

关于节流和防抖的例子说明我想了好久，总算想到了合适的例子。我把内容也尽量写的浅显易懂，代码简短，即使是小白阅读起来也不会有任何障碍。也欢迎大神们在评论区提出关于节流和防抖更多的方式和各种骚操作~

这是大冰块《看完就懂系列》的第3篇文章，《看完就懂系列》旨在把一些常见的概念或方法以通俗易懂的方式呈现出来。

原创不易，如有错误，欢迎指出。

如果有帮助到你，请给大冰块来个三连（点赞收藏评论）,让我们一起在前端的路上进步吧~🤭