本文旨在解决javaScript中使用`setTimeout`实现的计时器逐渐变慢的问题。通过分析传统实现方式的缺陷，提出使用系统时钟`date`对象来记录时间差，并结合`requestAnimationFrame`优化渲染，从而实现更精确的计时器功能。文章将提供详细的代码示例和解释，帮助开发者构建可靠的javascript计时器。
问题分析：setTimeout的局限性
传统的JavaScript计时器通常使用setTimeout或setInterval函数来周期性地更新时间。虽然这种方法简单易懂，但存在一个根本性的问题：setTimeout的回调函数并非在指定的时间间隔后立即执行。JavaScript是单线程的，setTimeout的回调函数会被放入事件队列中，等待主线程空闲时才能执行。这意味着，如果主线程被其他任务阻塞，回调函数的执行时间就会被延迟，导致计时器逐渐变慢。
此外，浏览器渲染页面也需要时间，频繁地更新dom元素也会占用主线程的资源，进一步加剧计时器的误差。
解决方案：基于系统时钟的精准计时
为了解决setTimeout的局限性，我们可以采用基于系统时钟的计时方案。该方案的核心思想是：
立即学习“Java免费学习笔记（深入）”；
- 记录起始时间： 在计时器启动时，使用Date对象记录当前的系统时间。
- 计算时间差： 在每次更新计时器时，再次使用Date对象获取当前时间，并计算与起始时间的差值。
- 更新显示： 将时间差转换为小时、分钟、秒和毫秒，并更新页面显示。
这种方案避免了依赖setTimeout的固定间隔，而是直接根据系统时间计算时间差，从而提高了计时的准确性。
代码示例
以下是一个使用系统时钟实现的JavaScript计时器示例：
var hr = 0; var min = 0; var sec = 0; var count = 0; var Startbutton = document.getElementById("Start"); var timer = false; var start_time; function start() { Startbutton.disabled = true; timer = true; start_time = (new Date()).getTime(); stopwatch(); } function stop() { timer = false; start_time = null; Startbutton.disabled = false; } function reset() { timer = false; start_time = null; Startbutton.disabled = false; min = 0; hr = 0; sec = 0; count = 0; document.getElementById("hr").innerhtml = "00"; document.getElementById("min").innerHTML = "00"; document.getElementById("sec").innerHTML = "00"; document.getElementById("count").innerHTML = "00"; } function stopwatch() { var now = (new Date()).getTime(); var diff = now - start_time; if (timer) { var str_time = (new Date(diff).toISOString().slice(11, 23)); var hrString = "" + str_time.substring(0, 2); var minString = "" + str_time.substring(3, 5); var secString = "" + str_time.substring(6, 8); var countString = "" + str_time.substring(9, 11); document.getElementById("hr").innerHTML = hrString; document.getElementById("min").innerHTML = minString; document.getElementById("sec").innerHTML = secString; document.getElementById("count").innerHTML = countString; requestAnimationFrame(stopwatch); } }代码解释：
- start_time: 变量用于存储计时器启动时的系统时间。
- start(): 函数在计时器启动时被调用，记录当前时间到start_time。
- stopwatch(): 函数计算当前时间与start_time的时间差，并将结果格式化为小时、分钟、秒和毫秒，然后更新页面显示。
- requestAnimationFrame(stopwatch): 使用requestAnimationFrame来调度stopwatch函数的执行。requestAnimationFrame 会在浏览器下一次重绘之前执行回调函数，这样可以确保计时器的更新与浏览器的渲染同步，从而避免卡顿和提高性能。
HTML 结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Stopwatch</title> </head> <body> <div id="container"> <div id="time"> <span class="digit" id="hr">00</span> <span class="txt">Hr</span> <span class="digit" id="min">00</span> <span class="txt">Min</span> <span class="digit" id="sec">00</span> <span class="txt">Sec</span> <span class="digit" id="count">00</span> </div> <div id="btn-container"> <button class="btn" id="Start" onclick="start()">Start</button> <button class="btn" id="Stop" onclick="stop()">Stop</button> <button class="btn" id="Reset" onclick="reset()">Reset</button> </div> </div> <script src="script.js"></script> </body> </html>优化建议
- 使用requestAnimationFrame： requestAnimationFrame会根据浏览器的刷新频率来调度回调函数的执行，可以避免不必要的重绘，提高性能。
- 避免频繁DOM操作： 尽量减少对DOM元素的直接操作，可以考虑使用虚拟DOM或批量更新DOM元素来提高性能。
- 代码优化： 优化代码逻辑，减少不必要的计算，提高代码执行效率。
总结
通过使用系统时钟和requestAnimationFrame，我们可以构建出更精确、更稳定的JavaScript计时器。这种方案避免了setTimeout的局限性，并充分利用了浏览器的渲染机制，从而提高了计时器的性能和准确性。在实际开发中，可以根据具体需求进行适当的调整和优化，以满足不同的应用场景。