Question

我有一个按钮，该按钮在属性为defer的外部脚本中调用javascript函数。该函数正在另一个外部脚本中调用另一个函数，该脚本创建XMLHttpRequest来加载JSON文件，执行起来有点长。因此，为了确保用户知道它没有冻结，我想在函数的开头显示一个加载器，并在结尾将其隐藏（使用JQuery）。我的问题是，加载程序只能在Firefox上运行。

我尝试在此处进行测试：https://jsfiddle.net/58rwmjo7/4/ 暂停函数代表我的调用函数。（小提琴甚至都无法与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();
 }

anotherjsfile.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();
  });
}

为什么我的加载程序仅使用Firefox？

1 个答案: