javascript - 为什么我的加载程序仅适用于 Firefox？

Question

这个问题已经有答案了:

How do I return the response from an asynchronous call? (42 个回答)

已关闭 4 年前。

我有一个按钮，可以使用属性 defer 在外部脚本中调用 javascript 函数。该函数正在调用另一个外部脚本中的另一个函数，该脚本创建一个 XMLHttpRequest 来加载 JSON 文件，执行起来有点长。因此，为了确保用户知道它没有卡住，我想在函数的开头显示一个加载器，并在末尾隐藏它(使用 JQuery)。我的问题是加载程序仅适用于 Firefox。

我尝试在这里进行测试:https://jsfiddle.net/58rwmjo7/4/暂停函数代表我调用的函数。 ( fiddle 甚至不能与 FF 一起使用，尽管它与我的真实代码非常相似......)。

(我已经使用 Firefox 64、Chrome 71、Edge 44 和 IE 11 进行了测试)。控制台中没有错误，我想知道为什么它不能与其他浏览器一起使用!我在测试时注意到，当调用我的函数时，SVG 的动画会卡住。我认为浏览器在运行期间完全卡住，但我真的不知道为什么。可能是对 XMLHttpRequest 的工作原理缺乏了解，抱歉，这对我来说是一个新鲜的知识。

main.html:

<input type="button" name="valider" onclick="validerBtn()" value="Valider">
<section id="loader">
<svg version="1.1" id="L7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve" >
 <path fill="#111" d="M31.6,3.5C5.9,13.6-6.6,42.7,3.5,68.4c10.1,25.7,39.2,38.3,64.9,28.1l-3.1-7.9c-21.3,8.4-45.4-2-53.8-23.3
  c-8.4-21.3,2-45.4,23.3-53.8L31.6,3.5z">
      <animateTransform
         attributeName="transform"
         attributeType="XML"
         type="rotate"
         dur="2s"
         from="0 50 50"
         to="360 50 50"
         repeatCount="indefinite" />
  </path>

</section>
<script src="https://code.jquery.com/jQuery-3.1.1.js"></script>
<script>$("#loader").hide();  </script>  
<script src="./anotherjsfile.js"></script>
<script defer src="./myjsfile.js"></script> 

myjsfile.js:

function validerBtn(){
  console.log("before");
  $("#loader").show();
  var jsonData = myRequestFunction(url);
  console.log("after");
  $("#loader").hide();
 }

另一个jsfile.js:

function myRequestFunction(urlReq) {
    var xhrq = new XMLHttpRequest();
    xhrq.onreadystatechange = function (event) {
    // XMLHttpRequest.DONE === 4
    if (this.readyState === XMLHttpRequest.DONE && (this.status == 200 || this.status == 0)) {
        console.log(xhrq.responseText);
        // console.log(xhrq.readyState, xhrq.status);
    } else {
        // console.log(xhrq.status, xhrq.statusText);
        console.log(xhrq.readyState, xhrq.status);
    }
};
    xhrq.open('GET', urlReq, false);
    xhrq.send(null);
    console.log(urlReq);
    var xhrRepText = xhrq.responseText;
    var parseJson = JSON.parse(xhrRepText);
    return parseJson;
}

我想在函数开始时显示我的加载器并在函数结束时隐藏它，并理解为什么它不能按照我的方式工作。谢谢您的帮助!

Answer 1

您尝试在 ajax 响应存在之前访问它。 console.log(urlReg) 之后的代码属于readystatechange 函数 - 但由于您有 jQuery，USE it .

var url = "somepage";

function validerBtn() {
  console.log("before");
  $("#loader").show();
  $.getJSON(url, function(data) {
    console.log("after", data);
    // here you need to process the data which is in JSON format assuming the server sends application/json
    $("#loader").hide();
  });
}