微信小程式如何實現搜尋框的防抖功能

2021-10-11 14:30:45 字數 669 閱讀 2082

1、首先給輸入框繫結乙個bindinput事件,只要輸入框內的值改變就會觸發該函式

placeholder

="請輸入您要搜尋的內容"

bindinput

="handleinput"

>

input

>

2、定義乙個變數timeid,該值為定時器的返回值,作用是方便等會兒清除定時器。

3、在handleinput函式中先清除定時器,然後再設定乙個定時器,傳送請求,就實現了防抖功能。

timeid:

0,//輸入框內的值改變就會觸發該函式

handleinput

(e)= e.detail //拿到輸入框中的值

cleartimeout

(this

.timeid)

//清除定時器

this

.timeid=

settimeout((

)=>

,1000)}

,//向後台發起搜尋的request請求

search

(value)

=request(}

) console.

log(data)

}

微信小程式中用TS實現函式防抖

前言 我的專案中有乙個需求需要用到函式防抖,但是發現小程式中防抖函式總是不生效,經過一番思考想到了下面的方法。一,對於用js開發的小程式 1.首先直接定義防抖函式 2.然後關鍵的一步,在生命週期鉤子裡初始化防抖函式 page onload function 防抖函式 debounce time ti...

如何利用JS防抖實現搜尋框優化

什麼是js的防抖?防抖指的是觸發事件後在n秒內函式只執行一次,若在n秒內再次觸發事件則重新計算,函式不會重複執行。在實際專案中我們可能會碰到搜尋框會浪費大量的請求。比如我們有乙個input,每次使用者在搜尋框輸入的時候就觸發oninput事件然後傳送請求。以下 是未優化前 優化後let input ...

微信小程式 搜尋框樣式 及form提交實現

bt search e 搜尋 begin view search view icon input input search bt sousuo 搜尋按鈕 為了不出現按鈕邊框斷線 bt sousuo after searchcion 搜尋 end wxml view search view icon ...