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 ...