Spring+SpringMVC+MyBatis+easyUI整合基礎篇(四)程式碼簡化
阿新 • • 發佈:2022-05-04
防抖(debounce)
原理:在事件被觸發n秒後再執行回撥,如果在這n秒內又被觸發,則重新計算時間。(最後一次優先)
例子:如果有人進電梯,那電梯將在10秒鐘後出發,這時如果又有人進電梯了,我們又得等10秒再出發。
思路:通過閉包維護一個變數,此變數代表是否已經開始計時,如果已經開始計時則清空之前的計時器,重新開始計時。
funtion debounce( fn, time ) { // 使用閉包來儲存變數 let timeout; return function() { if(!timeout) { // 如果持續存在,就清掉前面的定時器。 clearTimeOut(timeout); return; } timeout = setTimeout(fn, time) } } // 處理函式 function handle() { console.log(123) } //新增監聽事件 window.addEventListener('reseize', debounce(handle, 500));
節流(throttle)
原理:規定一個單位時間,在這個單位時間內,只能有一次觸發事件的回撥函式執行,如果在同一個單位時間內某事件被觸發多次,只有一次能生效。(一次優先)
例子:遊戲內的技能冷卻,無論你按多少次,技能只能在冷卻好了之後才能再次觸發
思路:通過閉包維護一個變數,此變數代表是否允許執行函式,如果允許則執行函式並且把該變數修改為不允許,並使用定時器在規定時間後恢復該變數。
function throttle ( fn, time ) { var timer = null; return function() { var _this = this; var args = arguments; if(!timer) { timer = setTimeout(function () { fn.apply(_this, args); timer = null; }, time) } } }
函式防抖和函式節流都是防止某一時間頻繁觸發,但是這兩兄弟之間的原理卻不一樣。
函式防抖是某一段時間內只執行一次,而函式節流是間隔時間執行。
使用場景
debounce
1.search搜尋聯想,使用者在不斷輸入值時,用防抖來節約請求資源。
2.window觸發resize的時候,不斷的調整瀏覽器視窗大小會不斷的觸發這個事件,用防抖來讓其只觸發一次。
throttle
1.滑鼠不斷點選觸發,mousedown(單位時間內只觸發一次)。
2.監聽滾動事件,比如是否滑到底部自動載入更多,用throttle來判斷。