《看完就懂系列》天哪！搞懂節流與防抖竟簡單如斯~

這是大冰塊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()之間的區別和用法

原創不易，若有錯誤，歡迎指出。

若是有幫助到你，請給大冰塊來個三連（點贊收藏評論）,讓咱們一塊兒在前端的路上進步吧~🤭