防抖與節流的最佳方案

函式防抖（debounce）：事件響應函式在一段時間後才執行。如果在這段時間內再次呼叫，則重新計算執行時間，當預定時間內沒有再次執行，該函式則執行相應時間

應用場景：

scroll事件滾動觸發

搜尋框按鈕提交

瀏覽器resize事件

函式節流（throttle）：如果持續觸發事件，每隔一段事件只執行一次事件

應用場景

dom拖拽

射擊遊戲

滑鼠移動

監聽滾動事件

解決：1.使用underscore.js庫

2.手寫(仿underscore.js)

防抖例項

let container = document.

queryselector
("#container"
)container.onmousemove =
debounce
(dosomething,
1000
)

function

dosomething
(e)

// immediate 立即呼叫，不等延遲

function
debounce
(func, wait, immediate)
, wait)
// 返回值
// this指向container
if(callnow) result = func.
(this
, arg)
}else
, wait)
}// 返回值
return result
}// 取消防抖方法
decounced.
cancel
=function()
return decounced
}

// 取消防抖

let dosome =
debounce
(dosomething,
1000
)// 取消
btn.
onclick
=function()

1.使用定時器

function

throttle
(func, wait)
, wait)}}
}

function

dosomething
(e)// 呼叫
container.onmousemove =
throttle
(dosomething,
1000
)

function

throttle
(func, wait)}}
function
dosomething
(e)// 呼叫
container.onmousemove =
throttle
(dosomething,
1000
)

// 時間戳方法 第一次觸發，最後一次不觸發

// 定時器方法 第一次不觸發， 最後觸發
// 第一次觸發， 最後觸發
function
throttle1
(func, wait)
return
function()
// 立即執行
func.
(this
, args)
previos = now
}elseif(
!timeout)}}
// 實現定時器和時間戳優化
// 第三個引數option:
// // 
// // 同時為false 有bug, 同underscore.js
function
throttle
(func, wait, option)
letlater
=function()
return
function()
if(now - previos > wait)
// 立即執行
func.
(context, args)
previos = now
}elseif(
!timeout && option.trailing !==
false)}
}function
dosomething
(e)// let dosome = throttle(dosomething, 10000, )
container.onmousemove =
throttle2
(dosomething,
2000
,)

防抖與節流方案 函式防抖和節流

在前端開發的過程中，我們經常會需要繫結一些持續觸發的事件，如 resize scroll mousemove 等等，但有些時候我們並不希望在事件持續觸發的過程中那麼頻繁地去執行函式。通常這種情況下我們怎麼去解決的呢？一般來講，防抖和節流是比較好的解決方案。讓我們先來看看在事件持續觸發的過程中頻繁執行...

節流與防抖

瀏覽器中某些計算和處理要比其他的昂貴，例如在瀏覽器中操作dom比非dom互動需要更多的記憶體和cpu的事件，連續嘗試進行過多的dom相關操作可能ui導致瀏覽器掛起，有時甚至會崩潰。尤其在ie中使用onresize事件處理程式的時候容易發生，當調整瀏覽器大小的時候，該事件會連續觸發。在onresize...

防抖與節流

防抖 當事件持續觸發，一定時間內沒有觸發事件函式處理一次。比如輸入框的ajax請求做模糊查詢 節流 當時間持續觸發，在一秒內只能觸發一次。比如滾動條持續向下滾動，載入更多資料 function debounce fn,wait function throttle func,delay functio...