页面存在多个setInterval

本文介绍了一种使用JavaScript管理定时器的方法,通过两个函数控制不同间隔的定时任务,确保任务能够准确执行并能在需要时清除定时器。
var firstInterval;
var secondInterval;

function firstFunction(){
     if(firstInterval) clearInterval(firstInterval);
      //code...
      firstInterval = setInterval('firstFunction()', 1000);
}


function secondFunction(){
    if(secondInterval) clearInterval(secondInterval);
        secondInterval = setInterval('secondFunction()', 2000);
}

 

转载于:https://www.cnblogs.com/Doduo/p/8004464.html

JavaScript 中,`setInterval()` 和 `clearInterval()` 是用于实现定时循环执行某些操作的方法。`setInterval()` 用于每隔一段时间执行指定的函数或代码块,而 `clearInterval()` 则用于停止由 `setInterval()` 启动的定时器。 以下是一个展示如何使用这两个方法的完整示例代码: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>setInterval 与 clearInterval 示例</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <h3>时间显示区域:</h3> <p id="timeDisplay">等待开始...</p> <button id="startBtn">启动定时器</button> <button id="stopBtn">停止定时器</button> <script> let intervalId = null; // 用于存储 setInterval 返回的标识符 let count = 0; function updateTime() { const now = new Date(); $('#timeDisplay').text(`当前时间:${now.toLocaleTimeString()},计数:${count}`); count++; } $('#startBtn').click(function () { if (intervalId !== null) { clearInterval(intervalId); // 如果已有定时器,先清除 } count = 0; intervalId = setInterval(updateTime, 1000); // 每隔1秒更新一次时间 }); $('#stopBtn').click(function () { if (intervalId !== null) { clearInterval(intervalId); intervalId = null; $('#timeDisplay').text('定时器已停止'); } }); </script> </body> </html> ``` ### 说明: - 在点击“启动定时器”按钮时,会先检查是否已经存在一个正在运行的定时器(通过判断 `intervalId` 是否为 `null`)。如果存在,则调用 `clearInterval()` 停止旧的定时器并重新设置新的定时器[^1]。 - 每次定时器触发时,都会调用 `updateTime()` 函数来更新页面上的时间和计数器。 - 点击“停止定时器”按钮后,会清除当前的定时器,并将 `intervalId` 设为 `null`,以确保不会重复清除或误操作[^2]。 ### 注意事项: - 使用 `setInterval()` 时应始终保存其返回值,以便后续可以通过 `clearInterval()` 清除定时器。 - 若不进行判断直接调用 `setInterval()`,可能会导致多个定时器同时运行,造成资源浪费甚至功能异常[^3]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值