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

本文链接：https://blog.csdn.net/weixin_42557996/article/details/112468910

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

写在前面

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

防抖篇

★防抖小故事

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

★防抖逻辑图

大冰块辛辛苦苦画的图1

★防抖代码实现

函数防抖代码的实现一般是根据setTimeout来实现。每次进入都会去执行setTimeout，但是如果已经有setTimeout在执行，则会先销毁执行的setTimeout，再创建一个新的setTimeout。保证只有一个setTimeout并且在指定时间后执行。

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

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

节流篇

★节流小故事

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

★节流逻辑图

大冰块辛辛苦苦画的图2

★节流代码实现

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

以滚动过程每3s触发一次处理函数为例：

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