小程序实现防抖功能
发布于 3 年前 作者 gangdong 3488 次浏览 来自 分享

防抖:防止某一时间频繁触发

作用:减少数据库请求,提高用户体验

demo:

WXML

<input type="text" placeholder="请输入搜索内容" name="search" bindinput="search"/>

<view wx:for="{{newArr}}" wx:for-index="key">
    {{newArr[key]}}
</view>

WXJS

data: {
        timer:'',
        newArr:[],
        arr:[
            '口罩','一次性口罩','医用口罩','防尘口罩','加厚口罩','保暖口罩',
            '空调','站式空调','挂式空调'
        ]
    },

search(evt){
        clearTimeout(this.data.timer)
        this.data.timer=setTimeout(()=>{
            let search=evt.detail.value;
            let newArr=[];
            if(search==''){
                this.setData({newArr:[]})
                return
            }
            for (let index = 0; index < this.data.arr.length; index++) {
                if(this.data.arr[index].search(search)!=-1){
                    newArr.push(this.data.arr[index])
                }
            }
            this.setData({newArr})
        },3000)  //三秒出现
    },

实现效果:搜索结果是根据搜索框中的值每3秒出现一次,即 有时间间隔

回到顶部