合并请求(多个请求防抖)-定时器方案

问题描述：点击按钮，会同时触发time变化和correct变化。首先，触发time变化，执行watch->time函数体,触发params变化，执行watch->params函数体，getData函数第一次入栈；其次，执行触发correct变化，执行watch->correct函数体,触发params变化，执行watch->params函数体，getData函数第二次入栈；最后，执行第一次入栈的getData（params为1，correct为0），请求返回结果是10条数据，执行执行第二次入栈的getData（params为1，correct为1），请求返回结果是2条数据，肯定第一次入栈的getData的请求后回来，因此最终结果是10条数据，期望：第二次入栈的getData请求回的2条数据

根本原因：getData请求执行了两次

// 错误代码
watch: {
    params: {
      deep: true,
      handler: function (newVal, oldVal) {
              this.getData()
      }
    },
    time: {
      deep: true,
      handler: function (newVal, oldVal) {
        this.params.pageIndex = 1
        this.params.endTime = newVal.endTime
        this.params.startTime = newVal.startTime
      }
    },
    correct (newVal, oldVal) {
      this.params.pageIndex = 1
      this.params.correct = newVal
    }
  },
methods: {  
   getData () { // 获取数据
      this.loading = true
      getDetectList(this.params).then(result => {
        const res = result.data
      })
   }
},

解决方案一：（定时器合并请求）

let timer = null
export default {}
watch: {
    params: { // 监听数据变化，执行请求
      deep: true,
      handler: function (newVal, oldVal) {
          // 点击评价筛选按钮，time和correct变化，getData会触发两次，使用定时器防抖
          clearTimeout(timer)
          timer = setTimeout(()=>{
              this.getData()
          })
      }
    },

方案二:（赋值）

time: {
      deep: true,
      handler: function (newVal, oldVal) {
        this.params.pageIndex = 1
        /*
        * bug：点击评价筛选按钮，触发time和correct变化，触发params变化，getData会执行两次
        * 方案：在此处将最新的this.correct赋值给this.params.correct，
        * 因此correct变化就不会再次触发params的变化了
        * */
        this.params.correct = this.correct
        this.params.endTime = newVal.endTime
        this.params.startTime = newVal.startTime
      }
    },
}

说明：首次触发time变化的时候，就将this.params.correct赋值最新的this.correct值,这样在this.correct变化不会再次触发this.params的变化了

ps:方案二灵感来源编写此篇文章问题描述时，因此“温故而知新，可以为师矣”