微信小程序 延迟搜索
2019-10-31 本文已影响0人
淡意的温柔丶
实现效果:
search2.gif实现思路:用户输入时,重置搜索等待时间
代码如下:
wxml:
<view class="body">
//这里就简单粘贴下输入框, 主要绑定 bindSearch 函数
<input class="searchBox input" placeholder="搜索"
placeholder-class="serchBox placeHolder"
maxlength="20" bindinput="bindSearch"/>
</view>
js
var api = require('../../config/api.js');
var util = require('../../utils/util.js');
Page({
data: {
params:"", //搜索条件
countTime:3000, //延迟搜索 时间
searchWaiting: false, //是否等待搜索倒计时中
},
onLoad: function(options) {
this.getCustList();
},
/**
* 获取数据列表
*/
getCustList: function() {
var that=this;
wx.showLoading({
title: '加载中',
});
util.request(api.CustList, {
pageNum:that.data.pageNum,
pageSize: that.data.pageSize,
params: that.data.params,
}, "POST").then(function(res) {
//关闭loading
wx.hideLoading();
if (res.code == api.RequestCodeSuccess) {
that.setData({
custList: res.data.list
}
}
});
},
/**
* 输入监听
*/
bindSearch:function(e){
this.setData({
countTime:3000,
params:e.detail.value,
})
//是否处于搜索倒计时中
if (!this.data.searchWaiting){
this.timer();
}
},
/**
* 延迟搜索
*/
timer: function () {
var that=this;
this.setData({
searchWaiting: true
})
let promise = new Promise((resolve, reject) => {
let setTimer = setInterval(
() => {
console.log('搜索倒计时: ' + that.data.countTime);
this.setData({
countTime: this.data.countTime - 1000
})
if (this.data.countTime <= 0) {
console.log('开始搜索: ' + that.data.params);
this.setData({
countTime: 3000,
searchWaiting: false,
})
resolve(setTimer)
}
}
, 1000)
})
promise.then((setTimer) => {
that.getCustList();//获取客户列表
clearInterval(setTimer)//清除计时器
})
},
})