摘要:防抖和節流連續觸發觸發頻率很高的時間,不進行優化,會出現頁面卡頓現象。節流防抖是多次觸發事件,目標函數只執行一次,不管觸發這些事件用了多少時間。
防抖(debounce)和節流(throttle)
連續觸發(觸發頻率很高)的時間,不進行優化,會出現頁面卡頓現象。
常見的需要優化的事件:
鼠標事件:
mousemove(拖拽)
mouseover(劃過)
mouseWheel(滾屏)
鍵盤事件:
keydown(按下鍵盤)
keypress(按下字符鍵盤)
keyup(彈起鍵盤)
window resize/scroll
DOM 元素動態定位
優化方式是控制事件處理器在一段時間內的執行次。
防抖頻繁(連續)觸發事件(比如用戶觸發輸入事件input),不執行目標動作,當不在觸發事件了,再執行。
實現思路,在事件處理器內,使用 setTimeout 包裹目標動作,一直觸發事件,就清除上次的定時器,不再觸發觸發事件,會執行最后一個定時器,目標動作也執行一次了。
JS代碼:
function debounce(callback, delay) { let timeout = 0; return e => { console.log("清除", timeout, new Date()); clearTimeout(timeout); //input 一直觸發,就清除上一次的定時器,防止執行目標函數,直到事件不觸發事件,最后一個定時器沒有清除,delay 時間后就會執定時器,就確保了目標函數只執行一次。 timeout = setTimeout(() => { callback(e); }, delay); console.log("新的", timeout, e.target.value, new Date()); }; } let print = debounce(e => { let value = e.target.value; console.log(value, new Date()); }, 1000); document .querySelector("#input") .addEventListener("input", print, false);
清除定時器的時機很關鍵,在新定時器生成之前,如果在之后,會將所有定時器都清除,目標函數一次都不執行。
節流防抖是多次觸發事件,目標函數只執行一次,不管觸發這些事件用了多少時間。而節流是在一段時間內,確保目標函數只執行一次,實現緩慢執行目標函數的效果。
上面的輸入使用節流實現:
let thorttle = (callback, delay) => { let timeout = 0; let now = new Date() - 0; return e => { console.log("now", now); let last = new Date() - 0; clearTimeout(timeout); if (last - now >= delay) { console.log("時間間隔", last - now); callback(e); now = last;//將上執行的時間賦值給 now } else { //將 delay 時間內多次觸發事件,目標函數合并到這里執行 timeout = setTimeout(() => { callback(e); }, delay); } }; }; let write = thorttle(e => { console.log(e.target.value, new Date()); }, 5000); document .querySelector("#input") .addEventListener("input", write, false);兩者比較
節流在某個時間段內,目標函數能執行一次,限制目標函數的執行頻率,不管事件觸發了多少次;
防抖是多次觸發事件,目標函數只執行一次,不管觸發了這些事件用了多少時間。
節流函數限制目標函數的執行頻率,有連續變化的效果,適用于關注變化過程的操作,可以調整目標函數執行頻率使得變化更加平滑,比如動畫、改變窗口時執行某些操作等,常用事件resize、scroll、mouseWheel、touchmove、mouseover等;
防抖函數適用于更關注結果的操作,不太關注操作過程,常見的事件有 input、keyup等。
最后看一個 將 防抖 和 節流都用 resize 事件的效果,更能體會兩者的區別:
function debounce(callback, delay) { let timeout = 0; return e => { clearTimeout(timeout); timeout = setTimeout(() => { callback(e); }, delay); }; } let print = debounce(e => { let value = e.target.value; console.log("debounce", window.innerWidth); }, 500); let thorttle = (callback, delay) => { let timeout = 0; let now = new Date() - 0; return e => { let last = new Date() - 0; clearTimeout(timeout); if (last - now >= delay) { callback(e); now = last; } else { timeout = setTimeout(() => { callback(e); }, delay); } }; }; let write = thorttle(e => { console.log("thorttle", window.innerWidth); }, 500); window.addEventListener("resize", write, false); window.addEventListener("resize", print, false);參考
函數節流與函數防抖
函數防抖與函數節流
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/54071.html
摘要:防抖和節流連續觸發觸發頻率很高的時間,不進行優化,會出現頁面卡頓現象。節流防抖是多次觸發事件,目標函數只執行一次,不管觸發這些事件用了多少時間。 防抖(debounce)和節流(throttle) 連續觸發(觸發頻率很高)的時間,不進行優化,會出現頁面卡頓現象。常見的需要優化的事件: 鼠標事件: mousemove(拖拽) mouseover(劃過) mouseWheel(滾屏)...
摘要:防抖函數防抖和節流是一對常常被放在一起的場景。同時,這里會設置一個定時器,在等待后會執行,的主要作用就是觸發。最后,如果不再有函數調用,就會在定時器結束時執行。 函數節流和去抖的出現場景,一般都伴隨著客戶端 DOM 的事件監聽。比如scroll resize等事件,這些事件在某些場景觸發非常頻繁。 比如,實現一個原生的拖拽功能(不能用 H5 Drag&Drop API),需要一路監聽...
摘要:相反,在討論時,面試中通常會提到三件事。而認為最后一個參賽者說了算,只要還能吃的,就重新設定新的定時器。試想,如果用戶的操作十分頻繁他每次都不等設置的時間結束就進行下一次操作,于是每次都為該用戶重新生成定時器,回調函數被延遲了不計其數次。本文不是討論最新的 JavaScript 庫、常見的開發實踐或任何新的 ES6 函數。相反,在討論 JavaScript 時,面試中通常會提到三件事。我自己...
閱讀 1061·2023-04-26 02:02
閱讀 2401·2021-09-26 10:11
閱讀 3553·2019-08-30 13:10
閱讀 3743·2019-08-29 17:12
閱讀 720·2019-08-29 14:20
閱讀 2187·2019-08-28 18:19
閱讀 2230·2019-08-26 13:52
閱讀 954·2019-08-26 13:43