js封装定时器解决多次调用定时器叠加问题及定时器无法清除的问题

共2个文件

js：1个

html：1个

需积分: 34 177 浏览量 2023-02-14 17:22:23 上传评论收藏 994B RAR 举报

在JavaScript编程中，定时器（Timer）是常用于实现异步操作的重要工具，例如延迟执行、周期性执行任务。然而，如果不妥善管理，定时器可能会引发一些问题，比如多次调用定时器导致叠加，以及定时器无法清除。本文将详细讨论这些问题，并提供一个基于`js class`的解决方案。让我们理解为什么会出现定时器叠加问题。当一个函数或方法中包含`setTimeout`或`setInterval`，并且这个函数或方法被多次调用时，每次调用都会启动一个新的定时器，导致多个定时器并行运行。这不仅可能导致预期之外的行为，还可能消耗不必要的系统资源。为了解决这个问题，我们可以封装一个类，该类使用单例模式来确保只有一个定时器实例。这样，无论调用多少次，都只会有一个定时器在运行，避免了叠加。 ```javascript class SingletonTimer { constructor(fn, delay) { this.fn = fn; this.delay = delay; this.timerId = null; } start() { if (!this.timerId) { this.timerId = setTimeout(() => { this.fn(); this.start(); // 如果需要周期执行，这里再次调用start }, this.delay); } } stop() { if (this.timerId) { clearTimeout(this.timerId); this.timerId = null; } } } ``` 上述`SingletonTimer`类接受一个回调函数`fn`和一个延迟时间`delay`作为参数。`start`方法会检查当前是否已存在定时器，如果不存在，则启动一个新的定时器。`stop`方法则用于清除定时器，防止无法清除的问题。例如，如果我们想要每隔两秒执行一个任务，但只允许一个实例运行，我们可以这样使用： ```javascript const task = () => console.log('Task executed'); const timer = new SingletonTimer(task, 2000); // 模拟多次调用 for (let i = 0; i < 10; i++) { timer.start(); } // 需要停止时 timer.stop(); ``` 在这个例子中，无论`start`方法被调用多少次，`task`函数都会每两秒执行一次，因为`SingletonTimer`确保只有一个定时器实例。当我们调用`stop`时，定时器会被正确清除，不再执行`task`。总结起来，通过封装定时器类并采用单例模式，我们可以有效地解决多次调用定时器导致的叠加问题，以及定时器无法清除的问题。这提高了代码的可维护性和资源利用效率，是JavaScript开发中一种实用的优化策略。在实际项目中，根据具体需求，还可以扩展这个类以支持更复杂的定时器管理功能。

资源推荐

资源详情

资源评论

收起资源包目录

demp.rar （2个子文件）

demp

demo.js 342B

demo.html 2KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <body> <button id="btn" type="button"> 开启定时器 </button> <div id="view" style="width:100px;height: 100px;background: #000;color: white;text-align: center;line-height: 100px;">0</div> <div id="view1" style="width:100px;height: 100px;background: #000;color: white;text-align: center;line-height: 100px;">0</div> <div id="view2" style="width:100px;height: 100px;background: #000;color: white;text-align: center;line-height: 100px;">0</div> <div id="view3" style="width:100px;height: 100px;background: #000;color: white;text-align: center;line-height: 100px;">0</div> </body> </head> <body> </body> </html> <script> var timerInterval = null let btn = document.getElementById("btn") var timerList = [] btn.onclick = ()=>{ if(timerList.length>0){ timerList.forEach((item,index)=>{ clearInterval(item) }) } timer('view') timer('view1') timer('view2') timer('view3') } //封装定时器 function timer(id,index=0){ let view = document.getElementById(id) timerInterval = setInterval(()=>{ index ++ view.innerText = index },2000) timerList.push(timerInterval) } </script>

评论收藏

内容反馈