Vue2+Vuetify组件同时监听单双击事件时setTimeout失效如何解决

问题根源 #

你现有代码的核心问题是setTimeout返回的定时器ID存放在方法的局部变量singleClick中，每次detectClick触发时局部变量都会重新初始化，第二次点击触发逻辑时拿不到第一次创建的定时器ID，导致clearTimeout失效，定时器会正常执行，看起来就像setTimeout没有按预期生效。

修正后的实现方案 #

首先需要把定时器ID挂载到Vue实例上，而非局部变量：

data() {
  return {
    clickCount: 0,
    singleClickTimer: null // 把定时器id存在实例data中持久化存储
  }
},
methods: {
  detectClick() {
    this.clickCount += 1
    // 每次点击先清除上一个待执行的定时器，避免重复创建
    if (this.singleClickTimer) {
      clearTimeout(this.singleClickTimer)
    }
    if (this.clickCount === 1) {
      this.singleClickTimer = setTimeout(() => {
        console.log("触发单击事件")
        this.currentPickerDate()
        this.clickCount = 0
      }, 300) // 双击判定间隔建议设置为200-300ms，更符合普通用户的操作习惯，500ms延迟感知过强
    } else if (this.clickCount === 2) {
      console.log("触发双击事件")
      this.showEvent()
      this.clickCount = 0
    }
  }
}

组件调用部分不需要改动，和你现有代码一致即可。

可选优化：封装自定义指令 #

如果需要在多个元素上复用单双击识别逻辑，可以封装为Vue2全局自定义指令，避免重复编写计数逻辑：

// 全局注册自定义指令
Vue.directive('single-double-click', {
  bind: function (el, binding) {
    let clickCount = 0
    let timer = null
    const delay = binding.value.delay || 300
    el.addEventListener('click', () => {
      clickCount++
      if (timer) clearTimeout(timer)
      if (clickCount === 1) {
        timer = setTimeout(() => {
          binding.value.single?.()
          clickCount = 0
        }, delay)
      } else if (clickCount === 2) {
        binding.value.double?.()
        clickCount = 0
      }
    })
  }
})

调用方式：

<v-date-picker
    v-model="date"
    v-single-double-click="{single: currentPickerDate, double: showEvent, delay: 300}"
    :events="allEvents"
    :picker-date.sync="pickerDate"
    event-color="red lighten-2">
</v-date-picker>

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