【js】JavaScript清除所有(多个)定时器的方法:

【js】JavaScript清除所有(多个)定时器的方法:js JavaScript 清除所有 多个 定时器的方法 清除定时器

大家好,欢迎来到IT知识分享网。


一、停止单个定时器
#在某些情况下,我们可能只需要停止单个定时器。 #在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); } 
五、案例(定时获取页面列表数据)
  1. 定时器会生成多个,即有多个定时器id,需要清除不需要的的定时器
  2. 菜单没有选中当前页面,定时器也不需要
<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> 

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/115629.html

(0)
上一篇 2024-11-17 22:45
下一篇 2024-11-18 07:00

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信