函數節流和防抖

函數節流:一個函數執行一次後,只有大於設定的執行週期後纔會執行第二次。 有個需要頻繁觸發函數,出於優化性能角度,在規定時間內,只讓函數觸發的第一次生效,後面不生效。

其原理是用時間戳來判斷是否已到回調該執行時間,記錄上次執行的時間戳,然後每次觸發 scroll 事件執行回調,回調中判斷當前時間戳距離上次執行時間戳的間隔是否已經到達 規定時間段,如果是,則執行,並更新上次執行的時間戳,如此循環;

**2.函數節流的應用場景 需要間隔一定時間觸發回調來控制函數調用頻率:

DOM 元素的拖拽功能實現(mousemove) 搜索聯想(keyup) 計算鼠標移動的距離(mousemove) Canvas 模擬畫板功能(mousemove) 射擊遊戲的 mousedown/keydown 事件(單位時間只能發射一顆子彈) 監聽滾動事件判斷是否到頁面底部自動加載更多:給 scroll 加了 debounce 後,只有用戶停止滾動後,纔會判斷是否到了頁面底部;如果是 throttle 的話,只要頁面滾動就會間隔一段時間判斷一次**

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章