Javascript 从对象重置setInterval（）

我正在玩VueJS并创建了一个简单的计数器。我想从

resetTimer（）

函数中重置

setInterval（）

方法。但是，它不起作用。不知道我错过了什么

newvue({
el:“#应用程序”，
数据：{
小时:0，
分钟:0，
秒：0，
柜台:0
},
方法：{
计时器（）{
设置间隔（（）=>{
this.seconds=this.timerFormat（++this.counter%60）
this.minutes=this.timerFormat（parseInt（this.counter/60，10）%60）
this.hours=this.timerFormat（parseInt（this.counter/3600，10））
}, 1000);
},
重置计时器（）{
clearInterval（this.timer（））
},
定时器格式（定时器）{
返回计时器>9？计时器：“0”+计时器；
}
}
})

精益Vue
{{小时}：{{分钟}：{{秒}

开始
暂停

如果要重置测量时间，只需自行设置值：

this.hours = 0;
this.minutes = 0;
this.seconds = 0;
this.counter = 0;

在这种情况下，您不需要clearInterval

注意：setInterval和clearInterval与您自己的私有定义变量“counter”无关，因此您需要处理它

如果要暂停计时器，请执行以下操作：

clearInterval(this.timer())

这将再次调用timer（）方法

我认为您希望保存返回值，然后使用它清除间隔，如下所示：

    timer() {
        this.intervalTimer = setInterval(() => {
            this.seconds = this.timerFormat(++this.counter % 60)
            this.minutes = this.timerFormat(parseInt(this.counter / 60, 10) % 60)
            this.hours = this.timerFormat(parseInt(this.counter / 3600, 10))
        }, 1000);
    },
    pauseTimer() {
        clearInterval(this.intervalTimer)
    },

因为

this.timer（）

返回

未定义的

试试这个

timer（）{
this.interval=setInterval（（）=>{
this.seconds=this.timerFormat（++this.counter%60）
this.minutes=this.timerFormat（parseInt（this.counter/60，10）%60）
this.hours=this.timerFormat（parseInt（this.counter/3600，10））
}, 1000);
}

及

pauseTimer（）{
clearInterval（this.interval）
}
为间隔计时器定义一个全局变量（
我的示例中的my_timer
），然后您可以在重置操作中清除它：

new Vue({
    el: '#app',
    data: {
        hours: 0,
        minutes: 0,
        seconds: 0,
        counter: 0,
        my_timer :0
    },
    methods: {
        timer() {
                this.my_timer = setInterval(() => {
                    this.seconds = this.timerFormat(++this.counter % 60)
                    this.minutes = this.timerFormat(parseInt(this.counter / 60, 10) % 60)
                    this.hours = this.timerFormat(parseInt(this.counter / 3600, 10))
                }, 1000);
            },
            pauseTimer() {
                clearInterval(this.my_timer)
            },
            timerFormat(timer) {
                return timer > 9 ? timer : '0' + timer;
            }
    }
})

希望这有帮助


newvue({
el:“#应用程序”，
数据：{
小时:0，
分钟:0，
秒：0，
柜台:0,，
我的计时器：0
},
方法：{
计时器（）{
this.my_timer=setInterval（（）=>{
this.seconds=this.timerFormat（++this.counter%60）
this.minutes=this.timerFormat（parseInt（this.counter/60，10）%60）
this.hours=this.timerFormat（parseInt（this.counter/3600，10））
}, 1000);
},
重置计时器（）{
clearInterval（这是我的计时器）
这个小时=0
这个。分钟=0
这个。秒=0
这个计数器=0
},
定时器格式（定时器）{
返回计时器>9？计时器：“0”+计时器；
}
}
})

精益Vue
{{小时}：{{分钟}：{{秒}

开始
重置
我已经亲自尝试过了，但它从未重置
setInterval（）
。它只是暂停了时间间隔，这对我来说似乎很奇怪，但当你说它应该“重置时间间隔”时，你的期望是什么？您希望您的时、分、秒再次为0吗？这是一个不同的问题-您只需要自己将它们设置为0，例如
this.hours=0；这个。分钟=0；这1.5秒=0；this.counter=0
我的意思是希望间隔从0开始，这样
clearInterval（）
函数就不会将
setInterval（）
计数器重置为0？我自己已经尝试过了，但它从未重置
setInterval（）
。它只是暂停了我觉得很奇怪的间歇时间，但我不想让它暂停。我想重置它并重新从0开始，但它没有。它只是暂停间隔检查我的更新，您只需重置视图的其他变量…是的，它重置了
my_计时器
，因此“
间隔
”停止循环，因此停止
计数器
的递增，而不是重置它。嗯，好的。现在这是有道理的