JavaScript定时器设置、使用与倒计时案例详解

定时器

JavaScript定时器是一种在指定时间间隔内反复执行指定的代码段的机制。利用定时器可以实现一些定时操作，例如轮询、闪烁等等。JavaScript中提供了两种定时器，分别是：

• setInterval: 可以反复执行指定的代码段，直到清除定时器。
• setTimeout: 在指定时间间隔内执行一次代码段，然后结束定时器。

setInterval

使用setInterval()可以定时执行一段指定的代码，并且可设置时间间隔。语法如下：

setInterval(function, milliseconds);

• function: 要执行的代码段
• milliseconds: 执行的时间间隔，单位为毫秒。可以是整数，也可以是小数。

例如，下面的代码每隔1s在控制台输出Hello World!：

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

在使用setInterval()时，需要注意以下几点：

• setInterval()返回的是一个数值，代表定时器的ID。可以用这个ID来取消定时器。
• 在每个周期执行的代码段需要足够快，不然会导致代码堵塞，无法正常运行。

setTimeout

使用setTimeout()可以设定一个指定时间后执行的定时任务。语法如下：

setTimeout(function, milliseconds);

• function: 要执行的代码段
• milliseconds: 设定的时间间隔，单位为毫秒。可以是整数，也可以是小数。

例如，下面的代码在2s后在控制台输出Hello World!：

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

在使用setTimeout()时，需要注意以下几点：

• setTimeout()返回的是一个数值，代表定时器的ID。可以用这个ID来取消定时器。
• 在设定的时间间隔内只执行一次，不会反复执行。

倒计时案例

下面我们通过一个倒计时案例来展示JavaScript定时器的使用。

我们需要实现一个倒计时功能，用户输入要倒计时的总时间，然后每隔一秒钟在页面上显示剩余时间，直到倒计时结束。

首先我们在HTML文件中添加一个输入框和一个按钮：

<label for="input-time">倒计时总时间：</label>
<input type="number" id="input-time" min="1">
<button id="start-countdown">开始倒计时</button>

然后我们在JavaScript文件中添加代码如下：

var timerId = null; //定义定时器ID
var totalSeconds = 0; //定义总秒数变量
var secondsLeft = 0; //定义剩余秒数变量

//点击按钮开始倒计时
document.querySelector('#start-countdown').addEventListener('click', function(){
  //获取用户输入的总时间，转化为秒
  totalSeconds = document.querySelector('#input-time').value * 60;

  //显示倒计时
  document.querySelector('#show-time').textContent = formatTime(totalSeconds);

  //设置每一秒的倒计时操作
  timerId = setInterval(function(){
    if(secondsLeft === 0){
      //如果倒计时结束，清除定时器
      clearInterval(timerId);
      alert('Time is up!');
    }else{
      //每一秒计算剩余时间，更新页面显示
      secondsLeft--;
      document.querySelector('#show-time').textContent = formatTime(secondsLeft);
    }
  }, 1000);
});

//每次倒计时更新显示时间的格式
function formatTime(seconds){
  var minutes = Math.floor(seconds / 60);
  var secondsToShow = seconds % 60;
  return minutes + ' 分钟 ' + secondsToShow + ' 秒';
}

在上面的代码中，我们首先获取了用户输入的总时间，然后在页面上显示倒计时，并使用setInterval()方法定义了每秒钟的倒计时操作。在每秒钟的倒计时操作中，我们每次更新剩余时间的变量并更新倒计时显示。当剩余时间为0时，我们清除了定时器，并提示用户时间已经结束。

案例二：定时刷新页面

下面我们来看一个简单的定时刷新页面的例子。假设我们需要每隔5秒钟自动刷新一次页面，我们可以使用以下代码：

setInterval(function(){
  location.reload();
}, 5000);

在上面的代码中，我们每隔5秒钟使用setInterval()方法执行一段重新加载页面的代码。这样页面将会被自动刷新。