<html>
<head>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
div#app { padding: 30px; margin: 30px auto; width: 300px; text-align: center;
border: 1px solid #ccc; box-shadow: 3px 3px 3px #aaa; }
div#time { font-size: 25pt; padding: 5px; margin: 0px auto; background: #ccc;
width: 200px; border: 1px solid black; }
</style>
</head>我在 vue.js 中使用 moment() 方法有一个工作 10 秒计数计时器，但几乎没有什么东西仍然无法工作。我想在当前时间 10 秒后设置clearInterval，但它永远不会停止。 我尝试了变量“count”和clearInterval()。 有人可以帮忙吗？
<body>
<div id="app">
<h1>counter1</h1>
<div id="time">{{ time }}</div>
</div><script type="text/javascript">
var count=0;
var app = new Vue({
el: '#app',
data: {
time: "0",
count:0
},
mounted() {
this.startTime = moment();
let callback = () => {
let time_diff = moment().diff(this.startTime);
this.time = moment.utc(time_diff).format("s");
this.running=true;
};
let interval= () =>{ setInterval(callback, 1000);
++count;
if(count==10) clearInterval(interval);
}
interval();
}
})
</script>最佳答案
您正在像这样定义间隔:
let interval= () =>{ setInterval(callback, 1000);
interval 包含一个函数，围绕 setInterval 进行。要取消间隔，我们需要分配结果值，而不是在更深层次的函数中。
删除该函数后，它看起来像这个工作演示:
var count=0;
var app = new Vue({
el: '#app',
data: {
time: "0",
count:0
},
mounted() {
// Create startTime
this.startTime = moment();
// Define callback
let callback = () => {
// Calculate time diff
let time_diff = moment().diff(this.startTime);
this.time = moment.utc(time_diff).format("s");
this.running=true;
// Bumb counter
++count;
// Clear interval on count==10
if (count==10) clearInterval(interval);
};
// Start interval
let interval = setInterval(callback, 1000);
}
})div#app { padding: 30px; margin: 30px auto; width: 300px; text-align: center; border: 1px solid #ccc; box-shadow: 3px 3px 3px #aaa; }
div#time { font-size: 25pt; padding: 5px; margin: 0px auto; background: #ccc; width: 200px; border: 1px solid black; }
/* Hide console wrapper */
.as-console-wrapper { display: none !important; }<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<h1>counter1</h1>
<div id="time">{{ time }}</div>
</div>关于javascript - 10秒计时定时器/vue.js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/67986107/