在前端開發(fā)中有一部分用戶行為會頻繁出發(fā)事件執(zhí)行竟宋。而對于DOM操作混蔼、資源加載等耗性能的處理百新，很可能導致界面卡頓，甚至瀏覽器崩潰矮瘟。函數節(jié)流（throttle）和函數的防抖（debounce）就是為了解決類似需求應運而生
秒懂它們的概念
函數防抖（debounce）和函數節(jié)流（throttle）都是為了緩解函數頻繁調用瞳脓，它們相似，但有區(qū)別
如上圖澈侠，一條豎線代表一次函數調用劫侧，函數防抖是間隔超過一定時間后才會執(zhí)行，函數節(jié)流是一定時間段內只執(zhí)行一次
節(jié)流(throttle)
函數節(jié)流就是預定一個函數只有大于等于執(zhí)行周期時才執(zhí)行，周期內調用不執(zhí)行烧栋。好像水滴攢到一定重量才會落下一樣写妥。
通俗來講節(jié)流，就是指連續(xù)觸發(fā)事件但是在 n 秒中只執(zhí)行一次函數劲弦。節(jié)流會稀釋函數的執(zhí)行頻率
- 窗口調整(size)
- 頁面滾動(scroll)
- 搶購瘋狂點擊(mousedown)
時間戳版實現：
function throttle(func, delay) {
let last = 0
return function () {
let now = +new Date()
if (now - last > delay) {
func.apply(this, arguments)
last = now
}
}
}
定時器版實現：
function throttle(func, wait) {
var timeout
return function (){
var _this = this
var args = arguments
if (!timeout) {
timeout = setTimeout(function (){
timeout = null
func.apply(_this, args)
}, wait)
}
}
}
我們應該可以很容易的發(fā)現耳标，其實時間戳版和定時器版的節(jié)流函數的區(qū)別就是，時間戳版的函數觸發(fā)是在時間段內開始的時候邑跪，而定時器版的函數觸發(fā)是在時間段內結束的時候
防抖(debounce)
防抖函數就是在函數需要頻繁觸發(fā)情況下次坡，只有足夠空閑的時間，才執(zhí)行一次画畅。好像公家車司機會等人都上車后才出站砸琅。
通俗來講防抖，就是指觸發(fā)事件后在 n 秒內函數只能執(zhí)行一次轴踱，如果在 n 秒內又觸發(fā)了事件症脂，則會重新計算函數執(zhí)行時間
- 實時搜索(keyup)
- 拖拽(mousemove)
function debounce(func, delay){
var timer = null
return function (){
var _this = this, args = arguments
clearTimeout(timer)
timer = setTimeout(function (){
func.apply(_this, args)
}, dealy)
}
}
