1. 程式人生 > >函式節流和防抖

函式節流和防抖

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

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

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

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