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

節流概念(Throttle)

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

主要應用場景有：scroll、touchmove

防抖概念(Debounce)

抖動停止后的時間超過設定的時間時執行一次函數。注意：這里的抖動停止表示你停止了觸發這個函數，從這個時間點開始計算，當間隔時間等于你設定時間，才會執行里面的回調函數。如果你一直在觸發這個函數并且兩次觸發間隔小于設定時間，則一定不會到回調函數那一步。

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

節流實現

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

代碼一：首次不執行

function throttle(fn,delay=100){ //首先設定一個變量，在沒有執行我們的定時器時為null let timer = null; return function(){ //當我們發現這個定時器存在時，則表示定時器已經在運行中，需要返回 if(timer) return; timer = setTimeout(()=>{ fn.apply(this,arguments); timer = null; },delay); }}

代碼二：首次執行

function throttle2(fn,delay=100){ let last = 0; return function(){ let curr = +new Date(); if(curr - last > delay){ fn.apply(this,arguments); last = curr; } }}

防抖實現

思路：首次運行時把定時器賦值給一個變量，第二次執行時，如果間隔沒超過定時器設定的時間則會清除掉定時器，重新設定定時器，依次反復，當我們停止下來時，沒有執行清除定時器，超過一定時間后觸發回調函數。

代碼一：首次不執行

function debounce(fn,delay=200){ let timer = null; return function(){ if(timer) clearTimeout(timer); timer = setTimeout(()=>{ fn.apply(this,arguments); timer = null; },delay); }}

代碼二：首次執行

function debounce2(fn, delay = 200, atBegin = true) { let timer = null, last = 0,during; return function () { let self = this, args = arguments; var exec = function () { fn.apply(self, args); } if (atBegin && !timer) { exec(); atBegin = false; } else { during = Date.now() - last; if (during > delay) { exec(); } else { if (timer) clearTimeout(timer); timer = setTimeout(function () {  exec(); }, delay); } } last = Date.now(); }}