clearInterval 不适用于 XMLHttpRequest

Question

我正在尝试在数据库中获得下一次游戏的结果。我使用 XMLHttpRequest 和 5s 延迟 setInterval 来获取数据。如果请求的状态是 200。代码运行良好。但是，如果状态不是 200。clearInterval 将不起作用，但 console.log 仍然有效。

var _resInterval;
_resInterval = setInterval(function() {
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "/index.php/forms/getDDResult/" + id, true);
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

  xhr.onload = function() {
    if (xhr.status === 200) {
      var _resp = JSON.parse(xhr.responseText);
      console.log(_resp);

      if (parseInt(_resp.interval) >= 0) {
        clearInterval(_resInterval);
        restartGame(parseInt(_resp.interval));
      }
    } else {
      console.log("error");
      clearInterval(_resInterval);
    }
  };
  xhr.send();
}, 5000);

更新：递归函数

function getGameResult() {
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "/index.php/forms/getDDResult/" + id, true);
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

  xhr.onload = function() {
    if (xhr.status === 200) {
      var _resp = JSON.parse(xhr.responseText);
      console.log(_resp);

      if (parseInt(_resp.interval) >= 0 && _resp.result != "Not available") {
        restartGame(parseInt(_resp.interval));
      } else {
        setTimeout(function() {
          getGameResult();
        }, 5000);
      }
    }
  };
  xhr.send();
}

我这样做是正确的还是应该将其更改为递归函数？谢谢。

-- 拉拉

Answer 1

问题是有可能调用clearInterval 并且XHR 正在等待响应。当浏览器收到响应时，定时器早已不复存在，但仍要处理响应。

如果您希望周期性 XHR 在启动另一个之前等待前一个 XHR 的响应，那么递归 setTimeout 是一个更好的选择。