JavaScript 定时器关键点及使用场景解析

什么是 JavaScript 定时器？

JavaScript 定时器是一种用于在指定时间间隔后执行一段 JavaScript 代码的机制。在开发中，我们通常需要在特定的时间间隔内执行某些操作，这时就可以使用 JavaScript 定时器。

JavaScript 提供了两种定时器：

setInterval
setTimeout

setInterval 和 setTimeout 的区别

setInterval 和 setTimeout 的主要区别在于执行的方式：

setInterval 以固定的时间间隔重复执行某个代码块，直到被取消。
setTimeout 则在等待指定的时间后执行一次代码块。

使用场景

定时轮播图

在网站开发中，我们经常需要实现图片或内容轮播功能。利用 setInterval 定时器，我们可以定时更换网页上的图片或内容，达到轮播的效果。

例如，下面的代码使用 setInterval 实现了一个简单的图片轮播：

<!DOCTYPE html>
<html>
<body>

<img id="myImage" src="image1.png" width="100" height="100">

<script>
var imageArray = ["image1.png", "image2.png", "image3.png", "image4.png"];
var imageIndex = 0;

setInterval(function() {
  imageIndex++;
  if (imageIndex == imageArray.length) {
    imageIndex = 0;
  }
  document.getElementById("myImage").src = imageArray[imageIndex];
}, 3000); // 每 3 秒钟更换一张图片
</script>

</body>
</html>

在该示例中，我们先定义了一个图片数组以及一个图片索引，然后利用 setInterval 定时器每 3 秒钟更换一次图片。当图片索引等于数组长度时，将图片索引设置为 0，达到循环播放的效果。

延时提示框

在用户操作网页时，我们经常需要在特定的时间段内显示提示框。利用 setTimeout 定时器，我们可以等待一段时间后显示提示框。

例如，下面的代码使用 setTimeout 实现了一个简单的延时提示框：

<!DOCTYPE html>
<html>
<body>

<button onclick="showAlert()">点击显示提示框</button>

<script>
function showAlert() {
  setTimeout(function() {
    alert("欢迎来到我的网站！");
  }, 3000); // 延时 3 秒钟后显示提示框
}
</script>

</body>
</html>

在该示例中，我们定义了一个 showAlert 函数，在按钮点击时被调用。在 showAlert 函数内部，我们使用 setTimeout 定时器等待 3 秒钟后显示提示框。