>[success] # 節流函數 1. js高級程序語言設計中的解釋：**函數節流背后的思想是指某些代碼不可以在沒有間斷的情況下連續重復執行**。 2. **實現的描述** **第一次調用函數，創建一個定時器，在指定的時間間隔之后運行代碼**。當**第二次**調用該函數時，**它會清除前一次的定時器并設置另一個**。如果前一個定時器已經執行過了，這個操作就沒有任何意義。然而，如果**前一個定時器尚未執行，其實就是將其替換為一個新的定時器**。目的是只有在執行函數的請求停止了一段時間之后才執行。 3. 節流意義 ，**實現函數的基本模式如下就是指連續觸發事件但是在 n 秒中只執行一次函數。節流會減少函數的執行頻率。** 4. 解決場景**當用戶快速做某種操作的時候他的時間間隔短且不固定，節流就是按照固定節奏去，固定執行頻率，而不再是取決于用戶手速操作**，一般來說頁面滾動可以使用節流，鼠標移動事件，用戶頻繁點擊按鈕操作 * 注： '**節流**' 這個詞理解成水龍頭滴水，他是在規定時間有順序的一滴一滴水，不會因為在不改變水龍頭閥門大小（相當于定時器時間）的情況下而影響到他水流速度 5. 如圖理解 5.1. 當事件觸發時，會執行這個事件的響應函數， 如果這個事件會被頻繁觸發，那么節流函數會按照一定的頻率來執行函數 5.2. 不管在這個中間有多少次觸發這個事件，執行函數的頻繁總是固定的  >[danger] ##### js 設計模式與開發實踐的例子 ~~~ 1.下面的throttle 函數的原理是，將即將被執行的函數用setTimeout延遲一段時間執行。 如果該次延遲執行還沒有完成，則忽略接下來調用該函數的請求。throttle函數接受2個參數， 第一個參數為需要被延遲執行的函數，第二個參數為延遲執行的時間 ~~~ ~~~ var throttle = function ( fn, interval ) { var __self = fn, // 保存需要被延遲執行的函數引用 timer, // 定時器 firstTime = true; // 是否是第一次調用 return function () { var args = arguments, __me = this; if ( firstTime ) { // 如果是第一次調用，不需延遲執行 __self.apply(__me, args); return firstTime = false; } if ( timer ) { // 如果定時器還在，說明前一次延遲執行還沒有完成 return false; } timer = setTimeout(function () { // 延遲一段時間執行 clearTimeout(timer); timer = null; __self.apply(__me, args); }, interval || 500 ); }; }; window.onresize = throttle(function(){ console.log( 1 ); }, 500 ); ~~~ >[danger] ##### 不使用定時器做節流 ~~~ function throttle(fn, interval, { leading = true, trailing = false } = {}) { // 計時器 let startTime = 0 let timer = null // 不能使用箭頭函數 為了保證this指向 // 實際調用函數就是 inner 因此要接受一些傳參 function inner(...args) { // 獲取當前時間 時間戳 const nowTime = +new Date() // 計算間隔時間 當前設置節流時間 - (當前記錄時間 - 上次節流已出發時間) const waitTime = interval - (nowTime - startTime) // 對立即執行進行控制(第一次節流觸發) if (!leading && startTime === 0) { startTime = nowTime } if (waitTime <= 0) { // 如果觸發說明 可以將尾部記錄的刪除 if (timer) clearTimeout(timer) fn.apply(this, args) // 記錄本次節流時間 startTime = nowTime timer = null return } /** * 是否需要執行尾部，例如當執行節流是5s 一組間隔 * 但我最后一次輸入是4.9秒那這最后一次輸入是進入 * 不到節流 就需要使用 我們記錄觸發 * * */ if (trailing && !timer) { timer = setTimeout(() => { // console.log("執行timer") fn.apply(this, args) startTime = new Date().getTime() timer = null }, waitTime) } } inner.cancel = function () { if (timer) clearTimeout(timer) startTime = 0 timer = null } return inner } ~~~