JS節流和防抖的區分和實現詳解

本文主要介紹的是關於JS中比較經常使用的函數：節流函數和防抖函數，從概念、使用場景到代碼簡單實現作了一個詳細的區分。但願對你有所幫助。·

在寫JS時，這兩個函數比較常見，有時候傻傻分不清用哪一個，或者說知道代碼要怎麼寫，但要說出它到底是節流函數仍是防抖函數時一臉楞逼。今天有一個同窗分享了這兩個的區分，我也來回顧一下，加深一下印象，以便往後用到時內心有底。PS：百度和谷歌搜索前幾個介紹都是相反介紹，本文爲原創，若有雷同純屬抄襲個人。

節流概念(Throttle)

按照設定的時間固定執行一次函數，好比200ms一次。注意：固定就是你在mousemove過程當中，執行這個節流函數，它必定是200ms（你設定的定時器延遲時間）內執行一次。沒到200ms，必定會返回，沒有執行回調函數的。

主要應用場景有：scroll、touchmove

防抖概念(Debounce)

抖動中止後的時間超過設定的時間時執行一次函數。注意：這裏的抖動中止表示你中止了觸發這個函數，從這個時間點開始計算，當間隔時間等於你設定時間，纔會執行裏面的回調函數。若是你一直在觸發這個函數而且兩次觸發間隔小於設定時間，則必定不會到回調函數那一步。

主要應用場景有：input驗證、搜索聯想、resize

節流實現

思路： 第一次先設定一個變量true，第二次執行這個函數時，會判斷變量是否true，是則返回。當第一次的定時器執行完函數最後會設定變量爲flase。那麼下次判斷變量時則爲flase，函數會依次運行