文章目录
- 一、停止单个定时器
- 二、暂停与恢复定时器
- 三、使用Promise来管理定时器
- 四、使用ES6特性管理定时器
- 五、案例(定时获取页面列表数据)
一、停止单个定时器
// 创建一个定时器
var timer1 = setTimeout(function() {
console.log("Hello world!");
}, 1000);
// 停止定时器
clearTimeout(timer1);
二、暂停与恢复定时器
// 创建一个对象来管理所有的定时器
var timerManager = {
timers: [],
addTimer: function(timer) {
this.timers.push(timer);
},
pauseTimers: function() {
for (var i = 0; i < this.timers.length; i++) {
clearTimeout(this.timers[i]);
}
},
resumeTimers: function() {
for (var i = 0; i < this.timers.length; i++) {
this.timers[i] = setTimeout(this.timers[i].callback, this.timers[i].interval);
}
}
};
// 创建多个定时器
var timer1 = {interval: 1000, callback: function() {
console.log("Hello world!");
}};
var timer2 = {interval: 2000, callback: function() {
console.log("Goodbye world!");
}};
// 添加定时器到管理器
timerManager.addTimer(timer1);
timerManager.addTimer(timer2);
// 暂停定时器
timerManager.pauseTimers();
// 恢复定时器
timerManager.resumeTimers();
三、使用Promise来管理定时器
// 创建一个函数来包装setTimeout
function wait(time) {
return new Promise(function(resolve, reject) {
setTimeout(resolve, time);
});
}
// 使用Promise管理定时器
Promise.all([wait(1000), wait(2000)]).then(function() {
console.log("Both timers complete!");
});
四、使用ES6特性管理定时器
// 创建Set来管理定时器
const timers = new Set();
// 创建多个定时器
const timer1 = setTimeout(() => {
console.log("Hello world!");
}, 1000);
const timer2 = setTimeout(() => {
console.log("Goodbye world!");
}, 2000);
// 将定时器添加到Set
timers.add(timer1);
timers.add(timer2);
// 暂停所有的定时器
for (const timer of timers) {
clearTimeout(timer);
}
五、案例(定时获取页面列表数据)
- 定时器会生成多个,即有多个定时器id,需要清除不需要的的定时器
- 菜单没有选中当前页面,定时器也不需要
<script>
// 创建Set来管理定时器
const timers = new Set();
export default {
data() {
return {
}
},
created() {
this.loadData()
},
watch: {
'$route': function (val) {
if (!val.path.includes("当前页面的path")) {
// 暂停所有的定时器
for (const timer of timers) { clearTimeout(timer); };
}else{
this.loadData()
}
}
},
beforeDestroy() {
// 暂停所有的定时器
for (const timer of timers) { clearTimeout(timer); }
},
methods: {
// 获取页面数据
loadData() {
// 暂停所有的定时器
for (const timer of timers) { clearTimeout(timer); }
let param = { ...xxx }
...API(param).then(res => {
....
}).finally(() => {
let timer = setTimeout(() => { this.init() }, 10000);
// 将定时器添加到Set
timers.add(timer);
})
},
}
</script>