函數節流（throttle）與 函數防抖（debounce）都是為了限制函數的執行頻次，以優化函數觸發頻率過高導致的響應速度跟不上觸發頻率，出現延遲，假死或卡頓的現象。
用的比較多的地方就是resize，scroll，用Ajax實現鍵盤輸入自動填充。
實際上，我們并不需要那么頻繁地觸發這些事件函數，只要能確保比較流暢的用戶體驗即可。函數節流與防抖需要做的是忽略一些事件請求以降低觸發回調的頻率。
實現原理：設置狀態鎖實現節流，設置和清除定時器實現防抖
- 函數節流-Throttle：預先設定一個執行周期，每X毫秒去執行一次函數
function throttle(fn, interval) {
var clock = true//clock是狀態鎖
return function () {
if (clock) {
fn()
clock = false
setTimeout(function () {
clock = true
}, interval)
}
}
}
- 函數防抖-Debounce：當調用動作過n毫秒后，才會執行該動作，若在這n毫秒內又調用此動作則將重新計算執行時間
function debounce(fn, wait) {
var clock
return function () {
//每次都清掉前面設定的定時器
clearTimeout(clock)
clock = setTimeout(function () {
fn()
}, wait)
}
}
以坐電梯為例：
函數節流 ：保證在第一個人進來后開始計時，電梯10秒后準時運行一次，不等待，如果沒有人，則不運行
函數防抖：如果有人進電梯（觸發事件），那電梯將在10秒鐘后出發（執行事件監聽器），這時如果又有人進電梯了（在10秒內再次觸發該事件），我們又得等10秒再出發（重新計時）。
示意圖
推薦閱讀：
