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

这是大冰块2021年第4篇原创文章，和大冰块一块儿在前端领域努力吧！！！💪

---

写在前面

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

防抖篇

★防抖小故事

小熊早上去找小虎玩，到了小虎家门口，小熊准备一直摁门铃吵醒小虎，因此小熊一直摁门铃，但是门铃一次也没有响。小熊觉得门铃坏了，因而中止摁门铃，过了一下子门铃响了。小虎在屋里嘿嘿一笑：个人门铃但是作了防抖操做呦，一直摁只有最后一次才会响。

★防抖逻辑图

★防抖代码实现

函数防抖代码的实现通常是根据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篇文章，《看完就懂系列》旨在把一些常见的概念或方法以通俗易懂的方式呈现出来。欢迎你们点击其余文章一块儿讨论学习：

• 《看完就懂系列》答应我，看完就开始用Symbol好吗？
• 《看完就懂系列》谈谈数据埋点的原理与实现
• 《看完就懂系列》Ajax是否是凭一己之力造就了整个前端的生态圈？
• 《看完就懂系列》项目中的权限管理复杂吗？
• 《看完就懂系列》15个方法教你玩转字符串
• 《看完就懂系列》字符串截取方法substr() 、 slice() 和 substring()之间的区别和用法

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

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