在开发过程中，遇到给后端返回的集合中的每一项设置定时器，用来刷新列表的状态，比如，待处理，处理中，处理完成。这就需要给每一项添加一个定时器可以单独控制清除开启，也可以全部控制清除开启。
效果：
1.定时器的返回值是ID(数字),就是每一个定时器都有一个编号，清除定时器的时候，清掉对应的编号就可以了。
2.创建定时器
// 开启全部定时器
open() {
this.isqingchu = true;
// 定时器数组置空
this.timerArr.length = 0;
this.list.forEach((item, index) => {
this.timerArr[index] = setInterval(() => {
this.$set(item, 'number', item.number + 1)
this.$set(item, 'stop', false)
}, 1000);
});
console.log(this.timerArr, 'timerArr')
},3.清除定时器要循环定时器的数组，而不是list的数组,全部清除定时器的时候需要把定时器数组置空
// 清除全部定时器
clear() {
this.isqingchu = false;
this.timerArr.forEach((item, index) => {
clearInterval(this.timerArr[index]);
});
// 定时器数组置空
this.timerArr.length = 0;
},4.完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue开发：for循环中添加多个定时器，可全部清除和开启，可单个清除和开启</title>
<!--引入 element-ui 的样式，-->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<!-- 引入element 的组件库-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#app {
padding: 50px;
}
</style>
</head>
<body>
<div id="app">
<el-button v-if="isqingchu" @click="clear" type="primary">清除全部定时器</el-button>
<el-button v-else @click="open" type="primary">开启全部定时器</el-button>
<el-button @click="controlOnes(item, index)" v-for="(item, index) in list" :key="item"
type="primary">{{item.number}}({{item.stop ? '开启定时器' : '暂停定时器'}})</el-button>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
isqingchu: true,
list: [{ number: 1 }, { number: 2 }, { number: 3 }, { number: 4 }],
// 定时器数组
timerArr: [],
}
},
mounted() {
// 默认全部开启
this.open()
},
methods: {
// 开启全部定时器
open() {
this.isqingchu = true;
// 定时器数组置空
this.timerArr.length = 0;
this.list.forEach((item, index) => {
this.timerArr[index] = setInterval(() => {
this.$set(item, 'number', item.number + 1)
this.$set(item, 'stop', false)
}, 1000);
});
console.log(this.timerArr, 'timerArr')
},
// 清除全部定时器
clear() {
this.isqingchu = false;
this.timerArr.forEach((item, index) => {
clearInterval(this.timerArr[index]);
});
// 定时器数组置空
this.timerArr.length = 0;
},
controlOnes(item, index) {
// 防止重复点击
clearInterval(this.timerArr[index]);
if (item.stop) {
this.timerArr[index] = setInterval(() => {
this.$set(item, 'number', item.number + 1)
this.$set(item, 'stop', false)
}, 1000);
} else {
this.$set(item, 'stop', true)
}
},
},
})
</script>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。