vue笔记 短时间内处理多次请求,只执行最后一次请求问题

今日用了近一个小时解决这个问题。。。。。
以后遇到此问题可以直接使用lodash工具库的debounce方法
具体可查看官方文档
首先用命令行导入lodash
在这里插入图片描述
接着直接引用工具库

  created () {
    let _ = require('lodash') // 引用
    this.setOneGet = _.debounce(this.getSearchCompanyCityInfo, 500) // 此处getSearchCompanyCityInfo是在methods中定义的函数, 500单位为毫秒,延迟500毫秒再调用,下同
    this.setTwoGet = _.debounce(this.getSearchCompany, 500)
    }

最后在watch中监听变化的对象

    searchData: {
      handler () {
        this.$refs.pagination.changeCurrentPage(1)
        // this.getSearchCompanyCityInfo(this.searchData)
        // this.getSearchCompany(this.pageObj, this.searchData)
        this.setOneGet()
        this.setTwoGet()
      },
      deep: true
    },

使用前后对比:
使用lodash前
vue笔记 短时间内处理多次请求,只执行最后一次请求问题_第1张图片
使用lodash后:
vue笔记 短时间内处理多次请求,只执行最后一次请求问题_第2张图片

你可能感兴趣的:(vue)