为什么我的加载器只能使用 Firefox？ [复制]

Question

我有一个按钮，它在具有 defer 属性的外部脚本中调用 javascript 函数。这个函数在另一个外部脚本中调用另一个函数，它创建一个 XMLHttpRequest 来加载一个 JSON 文件，执行起来有点长。 所以为了确保用户知道它没有冻结，我想在函数的开头显示一个加载器并在最后隐藏它（使用 JQuery）。我的问题是加载器仅适用于 Firefox。

我试图在这里做一个测试：https://jsfiddle.net/58rwmjo7/4/ pause 函数代表我调用的函数。 （小提琴甚至不能与 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();
  });
}