定时器轮询功能 setInterval：耐心等待，最终收获

2023-09-16 03:48:11

setInterval的基本用法

setInterval函数接受两个参数：

要执行的函数或代码块
间隔时间（以毫秒为单位）

当调用setInterval时，浏览器将每隔指定的时间间隔执行一次指定的函数或代码块。执行次数取决于您设置的间隔时间。

例如，以下代码将创建一个定时器，每隔1秒钟就输出"Hello, world!"：

setInterval(function() {
  console.log("Hello, world!");
}, 1000);

setInterval的常见用法

setInterval函数通常用于以下场景：

轮询后端数据： 当需要不断获取实时更新的数据时，如聊天消息、新闻动态或股票价格等，可以使用setInterval来定期向后端发送请求，获取最新数据。
模拟倒计时： 可以使用setInterval来实现倒计时功能，每隔一段时间更新倒计时的时间，直到时间结束。
创建动画效果： setInterval可以用于创建动画效果，通过不断更新元素的位置、大小或其他属性，实现动态变化的效果。
实现无限循环： setInterval可以用于实现无限循环，只要不清除计时器，函数或代码块就会一直执行下去。

setInterval的注意点

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

setInterval不会阻塞主线程，即使执行时间很长，也不会影响其他代码的执行。
setInterval的间隔时间不能太短，否则会对浏览器性能造成影响，甚至导致页面卡顿。
setInterval的函数或代码块应该尽量简洁，避免执行复杂的操作，以免影响性能。
使用setInterval时，需要考虑如何清除计时器。可以使用clearInterval()函数来清除计时器，防止其无限执行下去。

实际案例

下面是一个使用setInterval的实际案例。假设我们有一个前端页面，需要不断向后端发送请求，获取最新的订单数据。我们可以使用setInterval来实现这个功能。

前端代码：

function getOrders() {
  // 向后端发送请求，获取订单数据
  $.ajax({
    url: "/api/orders",
    success: function(data) {
      // 更新页面上的订单数据
      $("#orders").html(data);
    }
  });
}

// 每隔10秒钟获取一次订单数据
setInterval(getOrders, 10000);

后端代码：

// 定义一个API路由，用于获取订单数据
app.get("/api/orders", async (req, res) => {
  // 从数据库中获取订单数据
  const orders = await Order.find({});

  // 将订单数据返回给前端
  res.json(orders);
});

实际效果：

当用户访问该页面时，浏览器将每隔10秒钟向后端发送一次请求，获取最新的订单数据。后端将返回订单数据，并更新页面上的订单列表。