Javascript中的计时代码

在前端开发中，计时功能通常是必不可少的一部分。Javascript提供了多种计时方式，包括setTimeout、setInterval、requestAnimationFrame等。本文将介绍每种计时方式的用法及其优缺点。

setTimeout

setTimeout函数用于在指定的时间后调用一次函数。其语法如下：

setTimeout(function, delay);

其中，function为要执行的函数，delay为延迟的毫秒数。

例如，以下代码将在100毫秒后在console中输出"Hello World!":

setTimeout(function() {
  console.log("Hello World!");
}, 100);

需要注意的是，setTimeout的延迟时间不一定精确，因为JavaScript是单线程的，当有大量任务排队的时候，setTimeout可能会被阻塞。

setInterval

setInterval函数用于在指定的时间间隔内定时执行函数。其语法如下：

setInterval(function, delay);

其中，function为要执行的函数，delay为时间间隔的毫秒数。

例如，以下代码将每秒钟在console中输出一次当前时间：

setInterval(function() {
  console.log(new Date().toLocaleTimeString());
}, 1000);

需要注意的是，setInterval函数会一直执行，直到被明确停止或关闭页面。因此，如果不再需要定时执行某个任务，应该调用clearInterval函数终止计时器。

requestAnimationFrame

requestAnimationFrame函数用于在浏览器下一次重绘之前调用指定的函数。其语法如下：

requestAnimationFrame(function);

其中，function为要执行的函数。

例如，以下代码将在下一帧动画重绘前执行一次函数：

requestAnimationFrame(function() {
  console.log("Hello World!");
});

requestAnimationFrame函数的优点是，它会根据浏览器的刷新频率自动调整执行时间，提升动画流畅度。并且，它能避免多个动画同时执行时造成的卡顿现象。

需要注意的是，requestAnimationFrame的执行时间不能控制，因此不适合精确计时。同时，在使用requestAnimationFrame时，应该在动画停止时及时停止函数的递归调用，以防止出现短暂的UI冻结现象。

以上是Javascript中的三种计时方式。根据不同的场景和要求，可以选择合适的方式来实现所需的计时功能。