我的 xhr.onreadystatechange 函数在运行 if 代码之前运行 else 代码两次

Question

我正在使用 JavaScipt 制作一个简单的天气应用程序。我的目标是当用户输入一个位置而天气提供者没有该位置时，输入框会抖动（这就是 loadWeatherError() 所做的）。下面的代码运行 else 语句两次，然后运行 ​​if 代码。这意味着 loadWeatherError() 函数正在运行两次，即使位置有效，输入框也会抖动。因此，当我运行它时，我收到两次错误 2 警报，然后收到一次错误 1 ​​警报。有没有办法只让 loadWeatherError() 函数只运行一次，并且只在天气提供者没有返回正确数据的情况下运行？

xhr.onreadystatechange = function() {
  var DONE = 4; // readyState 4 means the request is done.
  var OK = 200; // status 200 is a successful return.
  if (xhr.readyState === DONE) {
    if (xhr.status === OK)
      alert("Error 1");
    var data = JSON.parse(xhr.responseText);
    if (data.response) { //deal with wunderground api

    } else { //deal with Yahoo api

    }
  } else {
    alert("Error 2");
    loadWeatherError();
    options.error("There is a problem receiving the latest weather. Try again.");
  }

};

Answer 1

发生的情况是您的状态正在发生变化，但它不等于 4。您必须经历每个就绪状态才能达到 DONE 值。每次状态更改时，您的代码都会运行，这就是导致错误的原因。删除状态不正确时输出错误的代码：

xhr.onreadystatechange = function() {
  var DONE = 4; // readyState 4 means the request is done.
  var OK = 200; // status 200 is a successful return.
  if (xhr.readyState === DONE) {
    if (xhr.status === OK) {
      alert("Error 1");
    } else {
      alert("Error 2");
      loadWeatherError();
      options.error("There is a problem receiving the latest weather. Try again.");
    }
    var data = JSON.parse(xhr.responseText);
    if (data.response) { //deal with wunderground api

    } else { //deal with Yahoo api
      alert("Error 2");
      loadWeatherError();
      options.error("There is a problem receiving the latest weather. Try again.");
    }
  }
};