JS定时器介绍和四个用法的对比

JS 定时器介绍

JavaScript 中的定时器是一种可以让我们在指定的时间间隔后执行代码的工具。 定时器对于在用户界面上创建动画、实现倒计时或在指定的时间间隔后执行其他任务非常有用。

定时器的四种用法

JS 中提供了四种定时器：

• setTimeout
• setInterval
• setImmediate
• requestAnimationFrame

这四种定时器各有其特点和用法，下表对它们进行了比较：

定时器	用途	延迟时间	重复执行	精度
setTimeout	延时执行一次	是	否	低
setInterval	重复执行	是	是	低
setImmediate	延时执行一次	否	否	高
requestAnimationFrame	动画效果	是	是	高

setTimeout

setTimeout() 方法会在指定的毫秒数后执行一次指定的函数。 setTimeout() 的语法如下：

setTimeout(function, milliseconds);

其中：

• function 是要执行的函数。
• milliseconds 是延迟的时间，单位是毫秒。

例如，以下代码会在 1000 毫秒（1 秒）后执行一个函数：

setTimeout(function() {
  console.log("Hello, world!");
}, 1000);

setTimeout() 可以接受多个参数，后面的参数会作为函数的参数传递。 例如，以下代码会在 1000 毫秒后执行一个函数，并把一个字符串作为参数传递：

setTimeout(function(message) {
  console.log(message);
}, 1000, "Hello, world!");

setInterval

setInterval() 方法会重复执行一个指定的函数，直到 clearInterval() 方法被调用。 setInterval() 的语法如下：

setInterval(function, milliseconds);

其中：

• function 是要执行的函数。
• milliseconds 是延迟的时间，单位是毫秒。

例如，以下代码会每 1000 毫秒（1 秒）执行一次一个函数：

setInterval(function() {
  console.log("Hello, world!");
}, 1000);

setInterval() 可以接受多个参数，后面的参数会作为函数的参数传递。 例如，以下代码会每 1000 毫秒（1 秒）执行一次一个函数，并把一个字符串作为参数传递：

setInterval(function(message) {
  console.log(message);
}, 1000, "Hello, world!");

setImmediate

setImmediate() 方法会尽快执行一个指定的函数，但不会阻塞事件循环。 setImmediate() 的语法如下：

setImmediate(function);

其中：

• function 是要执行的函数。

例如，以下代码会尽快执行一个函数：

setImmediate(function() {
  console.log("Hello, world!");
});

setImmediate() 可以接受多个参数，后面的参数会作为函数的参数传递。 例如，以下代码会尽快执行一个函数，并把一个字符串作为参数传递：

setImmediate(function(message) {
  console.log(message);
}, "Hello, world!");

requestAnimationFrame

requestAnimationFrame() 方法会请求浏览器在下一个动画帧执行一个指定的函数。 requestAnimationFrame() 的语法如下：

requestAnimationFrame(function);

其中：

• function 是要执行的函数。

例如，以下代码会在下一个动画帧执行一个函数：

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

requestAnimationFrame() 可以接受多个参数，后面的参数会作为函数的参数传递。 例如，以下代码会在下一个动画帧执行一个函数，并把一个字符串作为参数传递：

requestAnimationFrame(function(message) {
  console.log(message);
}, "Hello, world!");

总结

JS 中提供了四种定时器：setTimeout、setInterval、setImmediate 和 requestAnimationFrame。 这四种定时器各有其特点和用法，开发者可以根据自己的需要选择最合适的定时器。

setTimeout() 会在指定的毫秒数后执行一次指定的函数。setInterval() 会重复执行一个指定的函数，直到 clearInterval() 方法被调用。setImmediate() 会尽快执行一个指定的函数，但不会阻塞事件循环。requestAnimationFrame() 会请求浏览器在下一个动画帧执行一个指定的函数。