防抖與節流小案例

首先，沒有進行防抖與節流處理的滑鼠移動事件：

1

var num = 1;
2var owrap = document.getelementbyid('wrap');
3function
count ()
6 owrap.onmousemove = count;

防抖函式（debounce）

防抖函式（debounce）：指事件在觸發後指定時間內只執行一次，若在指定時間內又觸發了事件，則重新計算函式執行時間，防抖函式分為立即執行版和非立即執行版

非立即執行版：

上述非立即執行防抖函式結果顯示為滑鼠在盒子內頻繁移動（此處gif看不出效果，不過真實在移動）時，函式不會立即執行，在1000ms過後會執行一次事件函式，當我在觸發事件後在1s內再次觸發事件會重新計算執行時間並在結束事件後執行函式

立即執行版：

立即執行版防抖函式是在觸發事件後立即執行，並在1000ms後事件再次觸發時呼叫執行函式，若在延遲時間內再次觸發會重新計算執行時間

結合版：

二者結合版是在事件觸發後會立即執行一次函式並在1000ms後再次執行一次函式（注：存在bug，哈哈！！！當觸發事件後在延遲時間內再次觸發或者頻繁觸發事件依舊會執行多次函式）

節流函式（throttle）

節流函式（throttle）：指事件在頻繁觸發後在指定時間內觸發一次，節流會稀釋函式的執行頻率，對於節流，存在時間戳和定時器兩種方式

時間戳版：

可以看出，滑鼠在盒子內頻繁移動時，函式會立即執行，且每1s執行一次

定時器版：

1

function
throttle(fn,wait),wait)11}
12}13}
14 owrap.onmousemove = throttle(count,1000)

結合版：

1

function
throttle(fn, wait, type) else
if (type === 2) 
7return
function
() 17 } else
if (type === 2) , wait)23}
24}25}
26}27 owrap.onmousemove = throttle(count,1000,2)

節流與防抖

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

防抖與節流

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

節流與防抖

在實際開發中，我們經常會遇到一類需求 根據input輸入容來校驗或者搜尋資料，根據視窗的大小變化來進行相關操作等。如果事件操作函式跟使用者的操作保持實時同步，那麼當使用者的操作十分頻繁時，就會多出許多無用的事件操作，並加重瀏覽器的負擔，影響頁面的效能。這時我們可以採用debounce 防抖 和thr...