效能優化之函式防抖動 睿江雲

2022-09-23 06:06:09 字數 588 閱讀 1526

函式防抖動是一種常見的優化高頻率呼叫函式的手段,核心是把高頻率呼叫的函式優化為在某一時間段內只呼叫一次

根據具體呼叫的時機可以分為兩種,分別是先呼叫防抖以及後呼叫防抖

先呼叫防抖

先呼叫防抖是指先呼叫函式,然後等待一段時間,在等待時間結束後再進行下一次呼叫,如果在等待時間結束前發生了多次呼叫,則只會響應第一次。呼叫時間線如下所示

根據這個想法,可以大致得到如下**

後呼叫防抖

後呼叫防抖則是先等待一段時間,在等待時間結束後呼叫函式,如果在等待時間結束前再次呼叫,則需重新計時並等待。呼叫時間線如下所示

在原有**基礎上進行修改,增加後呼叫的防抖動方法

將防抖動的**合併一下,得到完整的防抖動**

應用場景

keyup、keydown等頻繁觸發的事件監聽

表單驗證、輸入搜尋、點選搜尋

其他會頻繁呼叫的函式等

總結函式防抖動本質上是檢測前後兩次連續間隔內的函式呼叫,把時間間隔內的多次函式呼叫合併成一次,從而實現對頻繁呼叫的函式的優化先呼叫防抖是立即執行時間間隔內的第一次函式呼叫,應用場景相對較少

後呼叫防抖是執行時間間隔內的最後一次函式呼叫,應用場景相對較多

js效能優化之函式節流 分流函式

比如我們在window.onresize事件中要列印當前瀏覽器視窗的大小,在我們通過拖拽來改變視窗大小時候,列印視窗大小這個工作1s就執行了10次。而實際上我們只需要2次或者3次。比如這行 window.onresize function 實現的思路就是將即將被執行的函式用settimeout延遲一...

Javascript效能優化之 函式節流技術

函式節流技術的主要思路是,通過乙個定時器,阻斷連續重複的函式呼叫。對於我們自己內部使用的函式,這通常意義不大,也不推薦使用這個技術,它可能會丟失對某些資料的處理。但是對於在使用者介面呼叫的函式,卻非常有意義。例如乙個 mousemove 或者ie 中resize 事件的監聽函式。這類事件監聽函式往往...

前端效能優化之函式防抖與截流

在前端開發當中,我們都知道有些互動事件,會頻繁觸發。這樣會導致我們的頁面渲染效能,如果頻繁觸發介面呼叫的話,會直接導致伺服器效能的浪費。話不多說,盤它!我們先簡單列一下 onresize onmousemove onkeydown srcoll onkeyup這裡我是用鍵盤事件 keyup作為測試 ...