为什么Vue.js中clearTimeout没有阻止定时函数执行？

• 语法错误
  • data函数写法错误，缺少函数体大括号，导致返回值异常，声明的变量无法正常挂载到实例上
  • watch的回调函数中使用了await关键字，但没有标记async，属于语法错误，会直接导致代码执行异常
• 核心逻辑问题
  你将setTimeout的赋值操作放在了await异步逻辑之后，快速多次触发watch时，前面的触发还没执行到定时器赋值的步骤，后续触发的clearTimeout只能读到空值，无法清除还未创建的定时器。如果异步请求的返回顺序发生乱序，还会进一步导致旧请求返回后覆盖新的定时器id，最终出现多个定时器同时生效的问题。
• 不规范写法
  定时器id不需要响应式处理，放在data中会被Vue做响应式劫持，属于不必要的性能开销，直接挂载到Vue实例上即可。

场景1：最后一次变更后，先执行完异步逻辑再等待2秒执行回调 #

export default {
  // 不需要在data中声明timerId
  watch: {
    // 给回调添加async标记
    async queryGeocodage(value) {
      // 先执行你的异步逻辑
      await // your async stuff
      // 异步执行完成后，先清除已有定时器再设置新的
      if (this.timerId) clearTimeout(this.timerId)
      this.timerId = setTimeout(() => {
        console.log('timeout')
        // 调用API
      }, 2000)
    }
  },
  beforeDestroy() {
    // 组件销毁时清除定时器，避免内存泄漏
    if (this.timerId) clearTimeout(this.timerId)
  }
}

场景2：最后一次变更后，总共等待2秒就执行回调，不等待异步逻辑 #

可以直接用防抖函数包裹整个回调逻辑：

// 可以自己实现防抖，也可以用第三方工具库的防抖方法
export default {
  watch: {
    queryGeocodage: debounce(async function(value) {
      await // your async stuff
      console.log('timeout')
      // 调用API
    }, 2000)
  },
  beforeDestroy() {
    // 组件销毁时取消防抖
    this.queryGeocodage.cancel()
  }
}

内容的提问来源于stack exchange，提问作者ermat77