世界杯预选赛中国队赛程_世界杯多少年一次 - fybstd.com


文章目录

一、停止单个定时器二、暂停与恢复定时器三、使用Promise来管理定时器四、使用ES6特性管理定时器五、案例(定时获取页面列表数据)

一、停止单个定时器

#在某些情况下,我们可能只需要停止单个定时器。

#在JavaScript中,我们可以使用clearTimeout()函数停止一个setTimeout()的定时器

#或者clearInterval()函数停止一个setInterval()的定时器。例如:

// 创建一个定时器

var timer1 = setTimeout(function() {

console.log("Hello world!");

}, 1000);

// 停止定时器

clearTimeout(timer1);

#当执行clearTimeout(timer1)时,之前创建的定时器就会被停止。

#对于setInterval()的定时器,使用clearInterval()的方法也是类似的。

#需要注意的是,clearTimeout()和clearInterval()函数都需要传入定时器的ID作为参数。

二、暂停与恢复定时器

#除了停止某个特定的定时器之外,有时候我们也需要暂停或者恢复所有的定时器。

#我们可以使用更高级的技术,比如使用闭包或者对象来控制所有的定时器。例如:

// 创建一个对象来管理所有的定时器

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();

#在此示例中,我们使用一个名为timerManager的对象来管理所有的定时器。

#addTimer()方法用于向管理器添加定时器,pauseTimers()方法用于暂停所有的定时器,resumeTimers()方法用于恢复所有的定时器。

#需要注意的是,pauseTimers()方法和resumeTimers()方法都需要遍历定时器数组,然后使用clearTimeout()函数来清除之前创建的定时器。

三、使用Promise来管理定时器

#使用Promise来管理定时器是一种非常高效的方式。

#我们可以通过创建一个Promise来实现定时器并且使用resolve()和reject()方法来控制定时器的行为。例如:

// 创建一个函数来包装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!");

});

#在此示例中,我们创建一个名为wait的函数,该函数返回一个Promise。

#在这个Promise中,我们使用setTimeout函数来实现一个定时器,并且使用resolve()方法来告诉Promise,当定时器触发时执行resolve()回调函数。

#最后,我们使用Promise.all()方法来等待所有的定时器完成,并且在完成时触发回调函数。这种方式相比于使用定时器数组进行管理,更加简洁和高效。

四、使用ES6特性管理定时器

#在ES6及以上版本的JavaScript中,我们可以使用更加现代的方式来管理定时器。例如,使用Set和箭头函数。

// 创建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,需要清除不需要的的定时器菜单没有选中当前页面,定时器也不需要


友情链接