验证码: 看不清楚,换一张 查询 注册会员,免验证
  • {{ basic.site_slogan }}
  • 打开微信扫一扫,
    您还可以在这里找到我们哟

    关注我们

vue函数input输入值请求时延迟1.5秒怎么解决

阅读:1162 来源:乙速云 作者:代码code

vue函数input输入值请求时延迟1.5秒怎么解决

vue函数input输入值请求时延迟1.5秒请求

做了一个input输入值后,延迟一段时间自动根据输入内容搜索功能

目的:避免当用户连续输入连续请求接口的问题,达到当用户输入完成之后再请求。


      
    
export default {
  components: {},
  data() {
    return {
      formSearch: {
        Num: '',
        timer: null
      }
    };
  },
   watch: {
    'formSearch.Num': {
      handler(value) {
        if (this.timer) {
          clearTimeout(this.timer)
        }
        this.timer = setTimeout(() => {
          this.handleFormSearch();
        }, 1500)
      },
      deep: true
    }
  },
  methods: {
    locale,
    handleFormSearch() {
     //查询方法
    }
  }
};

vue页面许多input框会导致输入延迟

做项目的时候第一次遇到这个问题(layui+vue),先来看我出现的问题,如图一我页面上有个双重for循环,且里面还使用到了过滤器见图二,这样下来我页面的数据量一旦非常大,对v-model是很不友好的,会造成v-model渲染会很慢

vue函数input输入值请求时延迟1.5秒怎么解决

vue函数input输入值请求时延迟1.5秒怎么解决

最好的解决方法要么是把这些for循环做的事去让后端处理,前端只做数据的展示,再要么就是在v-model上改成 v-model.lazy(我用的这个方法)让v-model延迟

vue函数input输入值请求时延迟1.5秒怎么解决

分享到:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: hlamps#outlook.com (#换成@)。
相关文章
{{ v.title }}
{{ v.description||(cleanHtml(v.content)).substr(0,100)+'···' }}
你可能感兴趣
推荐阅读 更多>