函式節流總結

2021-09-24 22:20:59 字數 824 閱讀 3146

函式節流

在呼叫window.onresize事件時,如果操作頻繁操作dom極為耗效能,因此在這種情況下可以通過定時器對該函式進行節流。

函式節流背後的基本思想是:

某些**不可以在沒有間斷的情況連續重複執行。

第一次呼叫函式,建立乙個定時器,在指定的間隔之後執行**。

第二次呼叫函式,它會清除前一次的定時器並設定另乙個。如果前乙個定時器執行過了,這個操作就沒有任何意義。

然而,如果前乙個定時器尚未執行,其實就是將替換為乙個新的定時器。

目的是只有在執行函式的請求停止了一段時間之後才執行。以下是該模式的基本形式:

var processor = ,

//初識處理呼叫的方法

process: function(),100) }}

processor.process();

process() 初始化任何處理所必須呼叫的。

performprocessing() 實際進行應完成的處理。

這個模式可以使用throttle()函式來簡化,這個函式可以自動進行定時器的設定和清除,如下例所示:

function throttle(method,context),100)

}

throttle()函式接受兩個引數:

method 要執行的函式

在哪個作用域執行

上面這個函式首先清除之前設定的任何定時器。

來看看函式節流的具體應用:

123

JS總結 (一)函式節流

本篇思考三個問題 什麼是函式節流?為什麼要使用函式節流?如何實現?一 基本思想 某些 不可以在沒有間斷的情況連續重複執行。二 使用原因 dom操作比起非dom互動,需要更多的記憶體和cpu時間,連續嘗試過多的dom操作可能會導致瀏覽器掛起,甚至崩潰。三 實現方式 使用定時器對函式進行節流,即第一次呼...

javascript函式節流

應用場景 實時輸入檢測 如根據使用者輸入文本來實時查詢資料 判斷註冊使用者名稱是否重複 郵箱格式檢驗 頁面滾動操作onscroll事件 頁面視窗大小改變onresize事件 滑鼠移入移出事件onmouseover,onmouseout 對於以上高頻率的執行操作來說如果不進行節流控制的話,一旦請求頻繁...

JavaScript 函式節流

個人理解 瀏覽器某個事件觸發的平率非常高 例如onscroll事件 如果每次都去執行處理事件的邏輯,消耗大量的cpu資源導致瀏覽器卡死,因此需要在一段時間內只執行最後一次函式的函式叫做函式節流。n 0 function resizehandler function throttle method,c...