近期在完成项目时,根据pe要求,在输入框输入文字时,要像百度一样有个预搜索的选项展示,结果碰到一个不太容易注意点,纠结了好一会。
在监听输入值变化的时候,每个字符都会发起一次请求,这样用户量大的话,请求量就会变得巨大,给服务器造成很大的压力。
所以想了好几个方案,最终还是以设置一个延时器的方法来解决,根据每个用户输入文字速度,得到一个字符输入的间隔时间,我这暂且设置为500ms
每500ms根据输入值进行一次请求操作,返回预搜索值。
因跨域的操作,使用resource的jsonp请求
主体代码如下:
var oSelf = this
clearTimeout(this.timer)
this.timer = setTimeout(function () {
oSelf.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?',{
params:{
wd:oSelf.msg
},
jsonp:'cb'/!*百度后台使用的回调是cb接收*!/
}).then(function (res) {
var data = res.data
oSelf.list = data.s
},function (err) {
console.log(err)
})
},500)