Javascript 为什么我的倒计时功能运行得很快?
我在vue.js中有一个倒计时函数,更新太快了 这是数据部分Javascript 为什么我的倒计时功能运行得很快?,javascript,vue.js,countdowntimer,Javascript,Vue.js,Countdowntimer,我在vue.js中有一个倒计时函数,更新太快了 这是数据部分 data() { return { selected: [], countdown: timerLimit } 下面是倒计时法 countdownTimer() { this.countdown = 60; var downloadTimer = setInterval(() => {
data() {
return {
selected: [],
countdown: timerLimit
}
下面是倒计时法
countdownTimer() {
this.countdown = 60;
var downloadTimer = setInterval(() => {
if(this.countdown <= 0){
clearInterval(downloadTimer);
if (this.thisUser.captain) {
Store.submitTurnEnd();
}
}
this.countdown -= 1
console.log(this.countdown)
}, 1000);
},
countdownTimer(){
这个倒计时=60;
var downloadTimer=setInterval(()=>{
如果(this.countdown你可以试试这个
new Vue({
el: "#app",
data: {
counter: 5
},
methods: {
countdownTimer: function() {
let interval;
interval = setInterval(() => {
if (this.counter > 0) {
this.counter = this.counter - 1;
} else {
clearInterval(interval);
// Do whatever you want to do
}
}, 1000);
}
}
})
模板部分是
<div id="app">
<h2>Countdown:</h2>
<h1>{{ counter }}</h1>
<button v-on:click="countdownTimer">Start</button>
</div>
倒计时:
{{counter}}
开始
它可以帮助您在数据中添加另一个变量:
data() {
return {
selected: [],
countdown: timerLimit,
isCountdownActive: false
}
方法:
countdownTimer() {
// exit method if it is active
if(this.isCountdownActive == true) return;
// first time set ttrue
this.isCountdownActive = true
this.countdown = 60;
var downloadTimer = setInterval(() => {
if(this.countdown <= 0){
clearInterval(downloadTimer);
if (this.thisUser.captain) {
Store.submitTurnEnd();
}
// On exit interval, restart to false
this.isCountdownActive = false
}
this.countdown -= 1
console.log(this.countdown)
}, 1000);
},
countdownTimer(){
//如果方法处于活动状态,则退出该方法
if(this.isCountdownActive==true)返回;
//第一次
this.isCountdownActive=true
这个倒计时=60;
var downloadTimer=setInterval(()=>{
如果(这个)倒计时