在轮询的事件处理中，setTimeout 比 setInterval 处理更加优雅可控 （2023-9-14）

[yaogengzhu]

轮询方案

function poll() {
  setTimeout(() => {
    // 发送轮询请求
    fetch('http://example.com/api')
      .then(response => {
        if (response.status === 200) {
          // 轮询成功，处理数据
          return response.json();
        } else {
          // 轮询失败，继续轮询
          return poll();
        }
      })
      .then(data => {
        // 处理数据
      })
      .catch(error => {
        // 处理错误
        console.error(error);
      })
      .finally(() => {
        // 继续轮询
        poll();
      });
  }, 5000); // 5秒一次轮询
}

// 启动轮询
poll();

使用setInterval进行轮询请求可能会出现以下问题：

1. 请求堆积：如果轮询请求的响应时间大于轮询间隔时间，那么请求就会堆积在一起，导致服务器压力过大。

2. 不可控的错误处理：使用setInterval进行轮询请求时，如果出现错误，无法对每个请求进行独立的错误处理，可能会导致错误信息被覆盖或丢失。

3. 可能会出现卡顿：如果轮询请求的响应时间较长，可能会导致页面卡顿，影响用户体验。

因此，相比于setInterval，使用setTimeout进行轮询请求更为优雅和可控。可以通过递归函数和setTimeout的方式，灵活控制轮询间隔时间和错误处理，避免请求堆积和页面卡顿。