微信ウィジェットはどのように検索ボックスのジッタ防止機能を実現します
3900 ワード
微信ウィジェットはどのように検索ボックスのジッタ防止機能を実現します
1、まず入力ボックスにbindinputイベントをバインドし、入力ボックス内の値が変化すればその関数をトリガーする
2、タイマーの戻り値である変数timerを定義し、タイマーを後でクリアするのを便利にする.
3、handleInput関数でタイマーをクリアしてからタイマーをセットし、リクエストを送信すると、ブレ防止機能が実現します.
1、まず入力ボックスにbindinputイベントをバインドし、入力ボックス内の値が変化すればその関数をトリガーする
<input
placeholder=" "
bindinput="handleInput"
>
input>
2、タイマーの戻り値である変数timerを定義し、タイマーを後でクリアするのを便利にする.
3、handleInput関数でタイマーをクリアしてからタイマーをセットし、リクエストを送信すると、ブレ防止機能が実現します.
timeId:0,
//
handleInput(e) {
const {
value} = e.detail //
clearTimeout(this.timeId) //
this.timeId=setTimeout(()=>{
this.search(value) // , 1s
},1000)
},
// request
search(value) {
const {
data} = request({
url: ' ', data: {
value}})
console.log(data)
}