用input以及防抖函式實現搜尋功能

2021-10-19 20:56:10 字數 1231 閱讀 2651

(1.)防抖,顧名思義,防止抖動,以免把一次事件誤認為多次,敲鍵盤就是乙個每天都會接觸到的防抖操作。

(2.)觸發高頻事件後n秒內函式只會執行一次,如果n秒內高頻事件再次被觸發,則重新計算時間。

(3.)把高頻事件轉變成低頻事件,從而提高專案效能,提高使用者的體驗。

1.首先要在js檔案中配置乙個函式;

2.其次是給input框加input事件可以時時監聽到input中值的變化;(此處運用vant元件庫中的搜尋框,具體使用請參考vant文件;)

="searchs"

>

v-model=

"keyword"

show-action

placeholder=

"搜尋影片、影院"

@input=

"onsearch(keyword)"

>

"onsearch(keyword)"

>搜尋<

3.最後是請求我們需要的資料;

//引入我們封裝好的js檔案(根據自己的路徑進行更改)

import seach from

"../../utils/seach"

;//在data中初始化temp函式

data()

;},//呼叫並啟用我們封裝的防抖函式

簡單實現函式防抖 函式節流

節流概念 限制函式觸發頻率,規定時間內只能觸發一次。實現 function throttle fun,t t fun arguments document.getelementbyid element onclick throttle 1000 防抖概念 連續觸發事件,只觸發一次,只有中斷指定的時間...

js實現防抖函式和節流函式

含義 防抖函式指的是在特定的時間內沒有再次觸發,才得以進行接下來的函式執行 用途 當window.onresize不斷的調整大小的時候,為了避免不斷的重排與重繪,可以用防抖函式設定在onresize完成後一段時間內不再有視窗大小變動,此時再進行dom的重排重繪 function debounce f...

用js寫出函式防抖和節流

1.什麼是函式防抖 函式防抖 debounce 就是指觸發事件後,在n秒內函式只能執行一次,如果事件在n秒內後被觸發了一次,則重新計算函式執行時間。2.為什麼需要函式防抖 前端事件中 如onresize,scroll,mousemove,mousehover等 會被頻繁觸發,不做限制可能一秒之內執行...