Why my loader is working with Firefox only?

Question

I have a button that call a javascript function in an external script with the attribute defer. This function is calling another function in another external script wich create an XMLHttpRequest to load a JSON file, it's a bit long to execute. So to make sure that users know that it's not freezing, I would like to display a loader at the beginning of the function and hiding it at the end (with JQuery). My problem is that the loader is only working with Firefox.

I tried to do a test here : https://jsfiddle.net/58rwmjo7/4/ The pause function represent my called function. (The fiddle isn't even working with FF altough it's pretty similar to my real code...).

(I've tested with Firefox 64, Chrome 71, Edge 44 and IE 11). There is no error in the console, I would like to know why it's not working with the others browsers ! I noticed while testing that the SVG's animation is freezing when my function is called. I think that browsers completely freeze during the function but I don't really know why. It may be a lack of understanding of the XMLHttpRequest working, I'm sorry, this is a fresh knowledge for me.

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;
}

I would like to display my loader at the beginning of my function and hide it at the end, and understand why it isn't working the way i'm doing it. Thanks for the help!

Answer 1

You try to access the ajax response before it exists. The code after console.log(urlReg) belongs in the readystatechange function - but since you have 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();
  });
}