專案技巧 函式節流

2021-09-11 08:21:55 字數 881 閱讀 2317

最近用vue在寫乙個類**,無法避免肯定會有商品搜尋模組,如果要做搜尋建議的顯示或自動補全,那麼必然需要監聽輸入內容向後台傳送請求。然而每次鍵入都傳送一次請求到後台是非常好效能的,很多時候使用者需要看到的是自己輸完整個詞語才顯示結果,這時候就需要我們自己手動去做個節流了。

主要用了settimeout方法,同時結合每次執行前clear一遍來達到節流效果,整個出來的邏輯就是只有當使用者最後一次鍵入,才真正觸發事件。

// 函式節流

export

const

debounce

=(func, delay =

200)

=>

,delay)};

};

用了es6的語法,更加簡便、語義化。

就拿乙個需要暴露事件給父元件的input框來舉例:(以vue專案為例子)

input框元件中:

>

>

type

="text"

:placeholder

="placeholder"

ref="input"

v-model

="query"

/>

div>

template

>

>

import

from

'assets/js/util'

//這個是上面的函式分流方法

export

default)}

script

>

javascript函式節流

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

JavaScript 函式節流

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

函式節流總結

函式節流 在呼叫window.onresize事件時,如果操作頻繁操作dom極為耗效能,因此在這種情況下可以通過定時器對該函式進行節流。函式節流背後的基本思想是 某些 不可以在沒有間斷的情況連續重複執行。第一次呼叫函式,建立乙個定時器,在指定的間隔之後執行 第二次呼叫函式,它會清除前一次的定時器並設...