JavaScript中定时器setTimeout()和setInterval()的用法

JavaScript中定时器包括setTimeout()和setInterval()两种函数，它们都可以让程序按照指定的时间间隔执行一定的代码。

setTimeout()函数

setTimeout()函数用于在指定的毫秒数后执行一段代码，语法如下：

setTimeout(func, delay, param1, param2, ...)

其中：

• func: 要执行的函数
• delay: 要延迟的毫秒数，即多少时间后执行指定的函数
• param1、param2等：传递给func函数的参数（可选）

例如，以下代码将在1秒后在浏览器控制台输出"Hello World!"：

setTimeout(function() {
  console.log('Hello World!');
}, 1000);

setInterval()函数

setInterval()函数用于按照指定的时间间隔循环执行一段代码，语法如下：

setInterval(func, delay, param1, param2, ...)

其中：

• func: 要执行的函数
• delay: 每次执行的间隔时间，即多长时间执行一次指定的函数
• param1、param2等：传递给func函数的参数（可选）

例如，以下代码将每个1秒在浏览器控制台输出递增的数值：

var counter = 0;
var timerId = setInterval(function() {
  console.log(counter);
  counter++;
}, 1000);

注意：setInterval()函数会一直执行，除非使用clearInterval()函数停止它运行。

定时器的注意事项

• 使用setTimeout()和setInterval()时，推荐使用匿名函数作为其第一个参数，以免与其他函数冲突。
• setTimeout()和setInterval()函数在代码执行期间是异步的，会在代码执行完成后才会执行。
• 因为所有的定时器都是独立的，所以其回调函数的执行顺序不一定与函数调用顺序一致。

示例1：使用setInterval()函数实现实时时钟

function updateTime() {
  var today = new Date();
  var hours = today.getHours();
  var minutes = today.getMinutes();
  var seconds = today.getSeconds();

  hours = ('0' + hours).slice(-2);
  minutes = ('0' + minutes).slice(-2);
  seconds = ('0' + seconds).slice(-2);

  document.getElementById('clock').innerHTML = hours + ':' + minutes + ':' + seconds;
}

var timerId = setInterval(updateTime, 1000);

示例2：使用setTimeout()函数实现倒计时

var count = 10;

function countdown() {
  console.log(count);
  count--;

  if (count >=0) {
    setTimeout(countdown, 1000);
  } else {
    console.log('Time is up!');
  }
}

countdown();

以上代码会递减输出10、9、8...0，直到输出"Time is up!"。