setInterval设置停止和循环

setInterval是JavaScript中的一个定时器函数，用于根据指定的时间间隔重复执行指定的代码块。它采用两个参数：callback函数和time间隔。

语法：

setInterval(callback, time);

其中，callback是一个函数，用于定义需要重复执行的代码块，time是一个整数，表示代码块执行的时间间隔（以毫秒为单位）。

setInterval函数的工作方式是：从执行代码开始的时间点开始计时，每隔time毫秒就执行一次callback函数。由于JavaScript是单线程执行的，所以在callback函数执行期间，所有其他的JavaScript代码都会被阻塞。这也意味着，如果callback函数执行的时间超过了time间隔，那么可能会导致一些问题，包括代码堆积和性能下降。

在开发中，我们经常会用到setInterval函数来实现定时更新页面内容、轮播图片、发送Ajax请求等等。下面我们来看一些实际的应用场景和使用示例。

1. 定时更新页面内容

setInterval函数非常适合用于定时更新页面的内容。比如，我们可以使用setInterval函数每隔一段时间，刷新页面上的时间显示：

HTML：

<div id="time"></div>

JavaScript：

function updateTime() {
  var timeDiv = document.getElementById("time");
  var now = new Date();
  timeDiv.innerHTML = now.toLocaleTimeString();
}
setInterval(updateTime, 1000);

上面的代码会在页面上显示实时的时间，并且每隔一秒钟更新一次。

2. 轮播图片

setInterval函数也可以用来实现轮播图片的效果。下面是一个简单的例子：

HTML：

<div class="slideshow">
  <img src="image1.jpg" alt="Image 1" class="active">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
  <img src="image4.jpg" alt="Image 4">
</div>

CSS：

.slideshow img {
  display: none;
}
.slideshow img.active {
  display: block;
}

JavaScript：

function slideShow() {
  var images = document.getElementsByClassName("slideshow")[0].getElementsByTagName("img");
  var activeImage;
  // 找到当前显示的图片
  for (var i = 0; i < images.length; i++) {
    if (images[i].classList.contains("active")) {
      activeImage = images[i];
      break;
    }
  }
  // 移除当前显示的图片的active类
  activeImage.classList.remove("active");
  // 找到下一张图片
  var nextImage = activeImage.nextElementSibling ? activeImage.nextElementSibling : images[0];
  // 添加下一张图片的active类
  nextImage.classList.add("active");
}
setInterval(slideShow, 3000);

上面的代码中，我们使用了CSS将除了当前显示的图片外的所有图片隐藏起来，并通过添加和移除active类来实现图片的切换。setInterval函数每隔三秒钟调用一次slideShow函数，从而实现图片的轮播效果。

3. 发送Ajax请求

setInterval函数还可以用来定时发送Ajax请求。比如，我们可以使用setInterval函数每隔一段时间，从服务器获取最新的数据并更新页面：

JavaScript：

function updateData() {
  // 发送Ajax请求获取最新的数据
  // ...
  // 更新页面
  // ...
}
setInterval(updateData, 5000);

上述代码中，我们定义了一个updateData函数，用于发送Ajax请求和更新页面。setInterval函数每隔五秒钟调用一次updateData函数，以保持数据的实时性。

但是需要注意的是，setInterval函数并不会在每次回调函数执行完毕后等待time间隔，而是立即开始计时。这意味着，如果回调函数执行时间超过了time间隔，可能会导致回调函数连续执行多次，从而导致代码堆积和性能问题。为了避免这种情况，可以使用 clearInterval 函数来停止 setInterval。

下面是一个使用 setInterval 和 clearInterval 的示例：

JavaScript：

function updateData() {
  // 发送Ajax请求获取最新的数据
  // ...
  // 更新页面
  // ...
}
var intervalId = setInterval(updateData, 5000);
// 10分钟后停止定时更新
setTimeout(function() {
  clearInterval(intervalId);
}, 600000);

上面的代码中，首先使用 setInterval 函数启动一个每隔五秒钟调用一次 updateData 函数的定时器，并将返回的定时器ID保存在 intervalId 变量中。然后，使用 setTimeout 函数在十分钟后调用一个匿名函数，这个函数中调用 clearInterval 函数停止定时器，从而停止定时更新。

总结：

setInterval函数是JavaScript中的一个定时器函数，用于按指定时间间隔重复执行指定的代码块。它可以应用于定时更新页面内容、轮播图片、发送Ajax请求等多种场景。需要注意的是，在使用setInterval函数时，要确保回调函数执行时间不会超过time间隔，以避免代码堆积和性能问题。另外，可以使用 clearInterval 函数来停止 setInterval。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/