详解JavaScript中setInterval方法的用法

一、setInterval函数用法

setInterval() 方法重复调用一个函数或执行一段代码，在指定的时间间隔（以毫秒计）之后，不停地执行，直到 clearInterval() 被调用或窗口被关闭。setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。

function showTime(){
  var date = new Date();
  var h = date.getHours();
  var m = date.getMinutes();
  var s = date.getSeconds();
  document.getElementById("clock").innerHTML = h + ":" + m + ":" + s;
}
setInterval(showTime, 1000);

该示例代码会在页面中显示当前时间，并且每隔1秒钟就会更新一次。

二、Vue中setInterval用法

在Vue中使用setInterval的方式与在原生JavaScript中略有不同。在Vue组件中，使用mounted钩子函数来定义一个setInterval，使组件渲染后立即启动该操作：

mounted () {
  setInterval(() => {
    this.tick ++;
  }, 1000);
}

上述代码是一个计时器定时器示例，每隔1秒钟tick增加1。

三、如何停止setInterval

当我们需要停止setInterval方法时，需要用到clearInterval() 方法。该方法接收一个参数，即定时器的唯一标识符。在执行之前，先要将该标识符存储起来，然后在需要停止计时器时，调用clearInterval() 方法，并传入该标识符。下面是一个停止计时器的示例：

let intervalId = setInterval(() => {
  console.log('Hello World');
}, 1000);

setTimeout(() => {
  clearInterval(intervalId);
}, 5000);

上述代码会在页面上每1秒输出一次 Hello World，然后在5秒钟后，停止计时器。

四、在html中setInterval函数用法

在HTML中，我们可以使用script标签来定义一个setInterval定时器，如下例所示：

<script>
  function myFunction() {
    setInterval(alertFunc, 1000);
  }

  function alertFunc() {
    alert("Hello!");
  }
  myFunction();
</script>

上述代码会在页面中弹出一个对话框，并且每隔1秒钟就会显示一次。

五、setInterval函数的用法

setInterval() 方法的用法多种多样，可以用于：轮播图效果、倒计时、自动刷新页面、聊天室等等。下面简单介绍几个使用场景：

1、轮播图效果

轮播图效果是通过定时器实现的。实现方法是定义一个数组，用来存放图片的URL地址，并用setInterval方法周期性地更换数组中的图片的内容。下面是简单的轮播图效果示例代码：

let images = [
  'https://i.imgur.com/uW1aWnc.jpg',
  'https://i.imgur.com/AJyx6FF.jpg',
  'https://i.imgur.com/hvZluXN.jpg'
];

let currentIndex = 0;

setInterval(() => {
  document.getElementById('image').src = images[currentIndex];
  currentIndex = (currentIndex + 1) % images.length;
}, 3000);

2、倒计时

倒计时是利用setInterval方法每秒钟更新一次时间，然后将剩余的时间渲染到页面上。下面是倒计时的示例代码：

let endTime = new Date("August 25, 2022 18:00:00").getTime();

setInterval(() => {
  let now = new Date().getTime();
  let timeRemaining = endTime - now;

  let days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24));
  let hours = Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  let minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
  let seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);

  document.getElementById('countdown').innerHTML =
    days + " 天 " + hours + " 小时 "
    + minutes + " 分钟 " + seconds + " 秒 ";

  if (timeRemaining < 0) {
    clearInterval(intervalId);
    document.getElementById('countdown').innerHTML = "活动已结束";
  }
}, 1000);

上述代码会在页面中显示剩余的时间，并且每隔1秒钟就会更新一次时间，当时间到达设定的结束时间时，会停止计时器。

3、自动刷新页面

自动刷新页面是通过setInterval方法周期性地重新加载页面来实现的。下面是自动刷新页面的示例代码：

let count = 5;
setInterval(() => {
  count --;
  document.getElementById('countdown').innerHTML = count;

  if (count === 0) {
    location.reload();
  }
}, 1000);

上述代码会在页面中显示一个倒计时，并且每隔1秒钟就会更新一次倒计时。当倒计时结束时，页面会重新加载。

六、JS的setInterval函数怎么停止

通过clearInterval() 方法可以停止setInterval函数。当需要停止setInterval函数时，只需要执行：clearInterval(定时器ID即可)。下面是JS的setInterval函数停止的示例代码：

let intervalId = setInterval(() => {
  console.log('Tick');
}, 1000);

// 5秒钟后停止定时器
setTimeout(() => {
  clearInterval(intervalId);
  console.log('Stopped');
}, 5000);

上述代码会输出 Tick，表示setInterval函数正在执行。5秒钟后，会输出 Stopped，表示setInterval函数已经停止。