節流與防抖

使用者在規定時間間隔內持續完成一件事，不會觸發函式執行。

//func 執行的函式
// wait 延遲時間
function debounce
(func, wait)
, wait)
if(callnow) func.
(context, args)
}}

函式會先執行一次，之後在規定時間間隔內持續操作不會觸發函式執行。

function debounce
(func, wait)
, wait);}
}

使用者在一定時間間隔內持續操作，不會觸發函式。

function debounce
(func, wait, immediate)
, wait)
if(callnow) func.
(context, args)
}else
, wait);}
}}

如果乙個函式持續的，頻繁的觸發，那麼就讓他在一定的時間間隔後觸發。

時間戳版
function throttle
(func, wait)
}}

定時器版
function throttle
(func, wait)
, wait)}
}}

雙劍合璧版

* @desc 函式節流
* @param func (function) 函式
* @param wait (number) 延遲執行毫秒數
* @param type (number)
1 表時間戳版，2 表定時器版
function throttle
(func, wait ,type)
else
if(type===2
)return
function()
}else
if(type===2
), wait)}}
 }
}

時間戳版和定時器版的節流函式的區別就是，時間戳版的函式觸發是在時間段內開始的時候，而定時器版的函式觸發是在時間段內結束的時候。

防抖：函式執行一次

節流：函式在一定時間內再次執行

節流與防抖

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

防抖與節流

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

節流與防抖

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

節流與防抖

節流與防抖

防抖與節流

節流與防抖

相關推薦