Vue-项目中输入框搜索的延时请求操作

近期在完成项目时,根据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)
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,026评论 19 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,705评论 25 709
  • 国家电网公司企业标准(Q/GDW)- 面向对象的用电信息数据交换协议 - 报批稿:20170802 前言: 排版 ...
    庭说阅读 11,201评论 6 13
  • 不记得什么时候听什么人说过,没有安全感的人是外表看似强大,实则脆弱不堪的胆小鬼,更加没有爱的能力。当时听到是什么反...
    落雨七七阅读 634评论 5 4
  • 阳台上的月季花开了,粉红的花朵小小的,并不打眼。跟同学在微信里晒的月季一比,自是我见犹怜! 望着这不起眼的小花,...
    木棉清雨阅读 212评论 0 0