Vue 实现三秒一次、五分钟结束的轮询
<template>
<div>
<div>{{ countDown }}</div>
<div>{{ message }}</div>
</div>
</template>
<script>
export default {
data() {
return {
countDown: 300, // 倒计时初始值为300秒(5分钟)
intervalId: null, // setInterval 的返回值
message: '轮询中...', // 轮询状态提示信息
};
},
created() {
// 创建轮询
this.intervalId = setInterval(() => {
if (this.countDown > 0) {
this.countDown--;
} else {
clearInterval(this.intervalId); // 倒计时结束,清除轮询
this.message = '轮询结束'; // 修改轮询状态提示信息
}
}, 3000); // 每隔3秒钟执行一次轮询
},
beforeDestroy() {
clearInterval(this.intervalId); // 组件销毁前清除轮询
},
};
</script>
原文地址: https://www.cveoy.top/t/topic/lpNY 著作权归作者所有。请勿转载和采集!