Question

在Vue应用程序中，我有一个设置计时器的地方。如果用户按下任意键或单击浏览器窗口中的任意位置，我想中断计时器。

我不想停止他们点击发生的一切。我只是想在任何时候都得到一个回调。

我可以在每个处理程序中放置一个函数调用，但这既乏味，草率，又不太易于维护。

这是我要实现的目标：

let timerId;
const startTheTimer = () => {
  timerId = setTimeout(() => { 
    somestuff();
    timerId = undefined;
  }, 10000);
}

// Called whenever any mouse click or keyboard event happens
const userDidSomething = () => {
  if (timerId) {
    clearTimeout(timerId);
    timerId = undefined;
  }
}

所以，我的问题是，如何调用函数userDidSomething（）？

谢谢。

Answer 1

您的问题似乎与Vue没有太大关系。您只需要将事件侦听器附加到document。例如

document.addEventListener('click', userDidSomething)
document.addEventListener('keydown', userDidSomething)

注意：任何捕获到并调用了stopPropagation()的事件都不会到达document。

如果您在组件内设置了计时器，则可能应该在组件的mounted生命周期挂钩中完成所有这些操作。

清除超时并删除beforeDestroy钩中的侦听器也是一个好主意。

例如

export default {
  data () {
    return {
      timerId: null
    }
  },
  methods: {
    startTimer () {
      this.timerId = setTimeout(...)
    },
    clearTimer () {
      clearTimeout(this.timerId)
    }
  },
  mounted () {
    this.startTimer() // assuming you want to start the timer on mount
    document.addEventListener('click', this.clearTimer)
    document.addEventListener('keydown', this.clearTimer)
  },
  beforeDestroy () {
    this.clearTimer()
    document.removeEventListener('click', this.clearTimer)
    document.removeEventListener('keydown', this.clearTimer)
  }
}

在Vue应用中，检测到是否发生了按键或鼠标点击

1 个答案: