javascript - 我的 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.");
    }
  }
};