当从方法中修改监视变量时，使用监视程序的 Vue 倒计时器会加速

Question

对 Vue 和 JS 非常陌生。我已经为 timerCount 变量（最初设置为 5）设置了一个观察器，它创建了一个 5 秒的计时器。当变量达到 0 时，会执行一些代码，然后我将计时器重置为 5 以重新启动它。这工作得很好，但是，我有一个调用方法的单击事件，该方法将执行不同的代码，然后将计时器重置为 5，但现在我的计时器加速了（快两倍）。

从我通过谷歌搜索可以发现，似乎有多个观察器/计时器实例同时运行，这就是导致加速的原因。我该如何解决这个问题，以便我的方法只是像平常一样重置计时器？

watch: {
    timerCount: {
        handler(value){
            //timer for 5 seconds
            if (value>0){
                setTimeout(() => {
                    this.timerCount--;
                }, 1000);
            }
            //if timer hits 0, execute code and reset timerCount to 5 seconds, this works fine
            else{
                /* Code */
                this.timerCount=5
            }
        },
        immediate: true,
    }
},

methods:{
    //this resets the timer, but it now goes twice as fast, don't know why.
    otherMethod(){
        /* Code */
        this.timerCount=5
    }

有什么

帮助吗？

这是我得到此代码的帖子： 如何在 Vue.js 中创建一个简单的 10 秒倒计时

Answer 1

在您的代码中，您正在观看timerCount。当你对 timeCount 进行更改时，意味着当你运行 otherMethod 时，Vue 会监视它，然后再次运行观察程序，并且该观察程序的处理程序再次运行。每次你改变timerCount变量，你的观察者就会一次又一次地运行。

实际上，如果没有观察者，您可以使用 setInterval （而不是 setTimeout）在创建的事件中开始计时。 setInterval 在给定的时间间隔内运行您的代码，但不严格为 1000 毫秒。它可能是 1005ms 或更短。

您可以在 setInterval 中创建一些函数，并给它 100ms 之类的值，并控制时间是否超过 5 秒。

Answer 2

创建一个方法 (createWatcher())，用于初始化观察程序并将观察程序实例保存为数据变量。创建组件时调用createWatcher()，每次需要修改监视变量时，停止监视程序并更新变量，然后再次创建监视程序。 (参见 whenUpdatingVariable())

参考创建watcher< /a> 和 停止观察者

data(){
 return{
  myWatcherInstance: null,
  timerCount: 10
 }
}
methods: {
 whenUpdatingVariable(){
  // stop watcher/unwatch
  this.myWatcherInstance();

  // update variable
  this.timerCount = 20;

  // create watcher again
  this.createWatcher();
 },
 createWatcher(){
    this.myWatcherInstance = this.$watch('timerCount', () => {
        setTimeout(() => {
          this.timerCount--;
        }, 1000);
      })
    }
  }
},
created(){
 this.createWatcher();
}