函式防抖:將幾次操作合併為一此操作進行。原理是維護乙個計時器,規定在delay時間後觸發函式,但是在delay時間內再次觸發的話,就會取消之前的計時器而重新設定。這樣一來,只有最後一次操作能被觸發。
函式節流:使得一定時間內只觸發一次函式。原理是通過判斷是否到達一定時間來觸發函式。
防抖**如下
/*** * @param fn 實際要執行的函式
* @param delay 延遲時間,也就是閾值,單位是毫秒(ms)
* * @return 返回乙個「去彈跳」了的函式
*/function debounce(fn, delay) , delay)
}}
節流**如下
// 節流throttle**(時間戳+定時器):var throttle = function(func, delay) else
}}function handle()
window.addeventlistener('scroll', throttle(handle, 1000));
參考鏈結
節流與防抖
瀏覽器中某些計算和處理要比其他的昂貴,例如在瀏覽器中操作dom比非dom互動需要更多的記憶體和cpu的事件,連續嘗試進行過多的dom相關操作可能ui導致瀏覽器掛起,有時甚至會崩潰。尤其在ie中使用onresize事件處理程式的時候容易發生,當調整瀏覽器大小的時候,該事件會連續觸發。在onresize...
防抖與節流
防抖 當事件持續觸發,一定時間內沒有觸發事件函式處理一次。比如輸入框的ajax請求做模糊查詢 節流 當時間持續觸發,在一秒內只能觸發一次。比如滾動條持續向下滾動,載入更多資料 function debounce fn,wait function throttle func,delay functio...
節流與防抖
在實際開發中,我們經常會遇到一類需求 根據input輸入容來校驗或者搜尋資料,根據視窗的大小變化來進行相關操作等。如果事件操作函式跟使用者的操作保持實時同步,那麼當使用者的操作十分頻繁時,就會多出許多無用的事件操作,並加重瀏覽器的負擔,影響頁面的效能。這時我們可以採用debounce 防抖 和thr...