vue 完美监听input值变化

1、vue中实时监听input值的变化,停止输入300ms后去请求,而不是时时请求数据
2、解决异步请求可能会发生先请求后返回问题,导致结果列表不是预料展示的效果

一、问题

做搜索功能时,监听input的value值变化实时请求数据,每增加一个字符,就发送一次请求。例如输入12345,会监听到5次变化1 12 123 1234 12345,导致连续请求5次。这是没必要的,增加服务器负担,可能出现卡顿的情况。
甚至,一定概率下会发生请求返回顺序问题,当输入速度很快时,连续发请求,服务器可能先返回12345请求的结果,然后再返回12请求的结果,导致最后页面上显示的结果是12请求到的结果列表,而不是想要搜索的12345的结果。一定程度上降低这种情况。

二、想法

不希望input框中值一改变,就马上去请求数据,而是在指定间隔内没有输入时,才会执行函数。如果停止输入但是在指定间隔内又输入,会重新触发计时。这就是函数防抖。
实时监听input值的变化,输入一个字符,300ms后再去获取input中的输入值。

三、关键代码

 <input ref="searchInput" v-model="inputVal" type="text" placeholder="搜索目的地" maxlength="20"/>
data() {
   return {
      inputVal: '',
      timeout: null,
   }
}

watch: {
    inputVal(curVal, oldVal) {
        // 实现input连续输入,只发一次请求
        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          this.getListPOI(curVal);
        }, 300);
    }
}

四、再优化,解决异步请求可能发生先请求后返回问题,导致结果列表不是预料展示的效果

假如300ms的延迟,服务器还是可能存在先发送的请求后返回。避免先请求后返回问题,确保以当前输入的值12345为参数给结果表赋值,可以在请求里做判断。当请求返回结果时,判断请求的参数inputVal和当前输入框的值this.inputVal相等,才进行相关操作:if (this.inputVal === inputVal) {...}

methods:{
      /**
       * poi模糊搜索列表
       */
      async getListPOI(inputVal) {
        if (inputVal === '') {
          return false;
        }
        this.searchPoi = [];
        this.divLoading = true;
        if (!navigator.onLine) { // 没有网络
          this.onLine = false;
          this.divLoading = false;
          return false;
        } else {
          this.onLine = true;
        }
        try {
          const res = await getListPOI({
            "buildId": this.$store.state.showBuildId,
            "coor": 1,
            "floorId": this.$store.state.showFloorId,
            "latitude": this.$store.state.userCurLoc[1] || 0,
            "longitude": this.$store.state.userCurLoc[0] || 0,
            "name": inputVal,
            "pageNum": 1,
            "pageSize": 30
          });
          if (this.inputVal === inputVal) { // 关键代码 避免先请求后返回问题,确保给列表赋值是以当前输入的值为参数的
            if (res.code === 0 && res.data) {
              let data = res.data;
              if (data.length === 0) {
                this.hasResult = false;// 没有结果
                this.searchPoi = [];
              } else { // 有结果
                this.hasResult = true;
                this.searchPoi = data;
              }
            } else {
              this.searchPoi = [];
              console.log("请检查/poi/list/POI接口返回的数据格式");
            }
            this.divLoading = false;
          }
        } catch (err) {
          this.divLoading = false;
          console.log("poi模糊搜索列表接口请求失败", err);
        }
      }
}

五、效果图

image.png

看到一篇写函数防抖的文章不错,推荐一下:https://blog.csdn.net/duola8789/article/details/78871789

这边看到的有个

在React、Vue和小程序中使用函数节流和函数防抖

地址:https://blog.csdn.net/qq_37860930/article/details/83545473

谢谢作者的分享~~
作者:吖蛋黄
链接:https://www.jianshu.com/p/3d23efcefb38
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、vue中实时监听input值的变化,停止输入300ms后去请求,而不是时时请求数据2、解决异步请求可能会发生先...
    吖蛋黄阅读 37,742评论 3 22
  • 一、Python简介和环境搭建以及pip的安装 4课时实验课主要内容 【Python简介】: Python 是一个...
    _小老虎_阅读 5,822评论 0 10
  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    怡宝丶阅读 2,611评论 0 7
  • ORA-00001: 违反唯一约束条件 (.) 错误说明:当在唯一索引所对应的列上键入重复值时,会触发此异常。 O...
    我想起个好名字阅读 5,451评论 0 9
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,342评论 0 3