如何在 JavaScript 中有效地进行轮询

在 web 开发中，轮询是一个常见的技术，用来从服务器获取更新的数据，或者检测某些状态的变化。在本文中，我们将介绍如何在 JavaScript 中有效地进行轮询。

什么是轮询

轮询是一种通过不断地向服务器发送请求来检查数据或状态是否更新的技术。通常情况下，轮询是以固定的时间间隔来执行的，或者在特定的事件触发时执行。

常见的轮询方法

setInterval

setInterval 是 JavaScript 中最常用的轮询方法之一。它可以在固定的时间间隔内重复执行一个函数。

setInterval(function() {
  // 这里是轮询要执行的代码
}, 1000); // 每秒执行一次

setInterval 函数接受两个参数：要执行的函数和时间间隔（以毫秒为单位）。

setInterval 会不停地执行函数，直到我们使用 clearInterval 来停止它。

setTimeout

setTimeout 也是一个常用的轮询方法，它可以在特定的时间延迟后执行一个函数。

function poll() {
  setTimeout(function() {
    // 这里是轮询要执行的代码
    poll();
  }, 1000); // 每秒执行一次
}

这里的 poll 函数使用了一个递归的方式来实现轮询，每一次执行完之后会再次调用 poll 函数。

XMLHttpRequest

XMLHttpRequest 是一个用于从服务器获取数据的对象。它可以通过设置 readyState 和 status 属性来检测请求的状态。我们可以使用它来实现轮询。

function poll() {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      // 这里是轮询要处理的数据
      setTimeout(poll, 1000); // 每秒执行一次
    }
  };
  xhr.open('GET', '/data', true);
  xhr.send();
}

在这里，我们通过设置 xhr.onreadystatechange 来监听请求状态的变化。当 readyState 变成 4，而且 status 为 200 时，说明请求已经成功完成。

Fetch API

使用 Fetch API 也可以轻松地实现轮询。

function poll() {
  fetch('/data')
    .then(response => response.json())
    .then(data => {
      // 这里是轮询要处理的数据
      setTimeout(poll, 1000); // 每秒执行一次
    });
}

在这里，我们使用了 Fetch API 来获取数据。一旦数据返回，我们就可以对它进行处理。

如何进行轮询优化

轮询可能会导致服务器资源的浪费，因为它会不断地向服务器发送请求。为了避免这种情况，我们可以使用以下优化策略：

延迟执行

我们可以在获取到数据之后，延迟一段时间再进行下一次轮询。这可以减少不必要的请求次数。

function poll() {
  fetch('/data')
    .then(response => response.json())
    .then(data => {
      // 这里是轮询要处理的数据
      setTimeout(poll, 5000); // 延迟 5 秒后再执行
    });
}

只在需要时轮询

我们可以根据需要来启动和停止轮询。比如，当我们离开页面或切换到后台时，就可以暂停轮询。

var polling = true;
function poll() {
  if (!polling) return; // 如果正在轮询，则继续执行
  fetch('/data')
    .then(response => response.json())
    .then(data => {
      // 这里是轮询要处理的数据
      setTimeout(poll, 1000); // 每秒执行一次
    });
}

// 停止轮询
function stopPolling() {
  polling = false;
}

// 启动轮询
function startPolling() {
  polling = true;
  poll();
}

总结

在本文中，我们介绍了 JavaScript 中常用的轮询方法，并讨论了如何进行轮询优化。为了避免使用不必要的服务器资源，我们应该尽可能地减少轮询的次数，并在合适的时候停止轮询。