JS函數防抖和函數節流
-
問題引入
問題1： 如果實現了dom拖拽功能，但是在綁定拖拽事件的時候發現每當元素稍微移動一點便觸發了大量的回調函數，導致瀏覽器直接卡死，這個時候怎麼辦？ -
問題2：如果給一個按鈕綁定了表單提交的post事件，但是用戶有些時候在網絡情況極差的情況下多次點擊按鈕造成表單重複提交，如何防止多次提交的發生？
爲了應對如上場景，便出現了函數防抖和函數節流兩個概念，總的來說：
這兩個方法是在時間軸上控制函數的執行次數。
函數防抖(debounce)
概念： 在事件被觸發n秒後再執行回調，如果在這n秒內又被觸發，則重新計時。
生活中的實例： 如果有人進電梯（觸發事件），那電梯將在10秒鐘後出發（執行事件監聽器），這時如果又有人進電梯了（在10秒內再次觸發該事件），我們又得等10秒再出發（重新計時）。
函數節流(throttle)
概念： 規定一個單位時間，在這個單位時間內，只能有一次觸發事件的回調函數執行，如果在同一個單位時間內某事件被觸發多次，只有一次能生效。
生活中的實例： 我們知道目前的一種說法是當 1 秒內連續播放 24 張以上的圖片時，在人眼的視覺中就會形成一個連貫的動畫，所以在電影的播放（以前是，現在不知道）中基本是以每秒 24 張的速度播放的，爲什麼不 100 張或更多是因爲 24 張就可以滿足人類視覺需求的時候，100 張就會顯得很浪費資源。
分析圖
假設，我們觀察的總時間爲10秒鐘，規定1秒作爲一次事件的最小間隔時間。
如果觸發事件的頻率是 0.5s/次，那麼
函數防抖如圖
因爲始終沒法等一秒鐘就被再次觸發了，所以最終沒有一次事件是成功的。
函數節流如圖
因爲控制了最多一秒一次，頻率爲0.5s/次，所以每一秒鐘就有一次事件作廢。最終控制成1s/次
如果觸發事件的頻率是 2s/次，那麼
函數防抖如圖
函數節流如圖
同樣，2s/次 大於了最小時間規定，所以每一次觸發都生效。
應用場景
對於函數防抖，有以下幾種應用場景：
給按鈕加函數防抖防止表單多次提交。
對於輸入框連續輸入進行AJAX驗證時，用函數防抖能有效減少請求次數。
判斷scroll是否滑到底部，滾動事件+函數防抖
總的來說，適合多次事件一次響應的情況
對於函數節流，有如下幾個場景：
遊戲中的刷新率
DOM元素拖拽
Canvas畫筆功能
總的來說，適合大量事件按時間做平均分配觸發。
函數防抖：
function debounce(fn, wait) {
var timer = null;
return function () {
var context = this
var args = arguments
if (timer) {
clearTimeout(timer);
timer = null;
}
timer = setTimeout(function () {
fn.apply(context, args)
}, wait)
}
}
var fn = function () {
console.log('boom')
}
setInterval(debounce(fn,500),1000) // 第一次在1500ms後觸發，之後每1000ms觸發一次
setInterval(debounce(fn,2000),1000) // 不會觸發一次（我把函數防抖看出技能讀條，如果讀條沒完成就用技能，便會失敗而且重新讀條）
之所以返回一個函數，因爲防抖本身更像是一個函數修飾，所以就做了一次函數柯里化。裏面也用到了閉包，閉包的變量是timer。
函數節流
function throttle(fn, gapTime) {
let _lastTime = null;
return function () {
let _nowTime = + new Date()
if (_nowTime - _lastTime > gapTime || !_lastTime) {
fn();
_lastTime = _nowTime
}
}
}
let fn = ()=>{
console.log('boom')
}
setInterval(throttle(fn,1000),10)
如圖是實現的一個簡單的函數節流，結果是一秒打出一次boom
小結
函數防抖和函數節流是在時間軸上控制函數的執行次數。防抖可以類比爲電梯不斷上乘客,節流可以看做幻燈片限制頻率播放電影。
擴展閱讀
Github: JavaScript 函數節流和函數去抖應用場景辨析
SegmentFault：函數節流與函數防抖
Github:函數節流與函數防抖
作者：ACERY1
鏈接：http://taobaofed.org/blog/2016/08/12/optimized-react-components/