使用纯JS的REST API Spinner

Question

我在调用rest API并尝试在加载结果之前使用微调器。

它是用纯JS编写的，所以我无法为它找到合适的解决方案。

这是我的代码。我需要加载预加载器，直到显示结果。例如，在no result found之前，我想要一些微调器。虽然我有spinner编码但我需要显示它直到脚本运行。 console.log可以为我工作，我可以在那里替换微调器脚本。

谢谢

function callREST() {
  const app = document.getElementById('root');

  while (app.firstChild) {
    app.removeChild(app.firstChild);
  }

  var inputForm = document.getElementById('zip');
  var code = inputForm.value;

  var request = new XMLHttpRequest();
  request.open('GET', 'Path to API URL' + code, true);

  request.onload = function() {

    // Begin accessing JSON data here
    var responseData = JSON.parse(this.response);
    var data = responseData.Agents.Agent;

    if (request.status >= 200 && request.status < 400) {

      var zip = responseData.Agents['@ZipCode'];

      if (typeof data == 'undefined' || zip != code) {
        const noData = document.createElement('div');
        noData.setAttribute('class', 'container text-center font-weight-bold pt-3');
        noData.textContent = 'No agent available.';
        app.appendChild(noData);
      } else if (zip === code) {

        for (var i = 0; i < data.length; i++) {
          var agent = data[i];

          const card = document.createElement('div');
          card.setAttribute('class', 'result');

        };
      }

    } else {
      const errorMessage = document.createElement('div');
      errorMessage.textContent = "Something is not right!";
      app.appendChild(errorMessage);
    }
  }


  request.send();
}

<div id="wrapper">
  <main id="main">
    <form action="#" class="question-form">
      <h1>Enter your zip code</h1>
      <div class="form-group">
        <label for="zip">Zip Code</label>
        <input type="text" id="zip" class="form-control" oninput="zipData()">
      </div>
      <div class="button-holder">
        <button class="btn btn-primary" onclick="callREST()">Search</button>
      </div>
    </form>
    <div id="root"></div>
  </main>
  <div id="loader" class="loading-overlay">
    <img src="images/spinner.svg" alt="image description">
  </div>
</div>

Answer 1

所以有三件事：

1. 从开始将预加载器设置为display:none。我把它设置在这里。
2. 执行diplay: block时，将预加载器设置为callREST()。使它成为变量声明后的第一件事。
3. 在display:none之后将预加载器设置回request.readyState === 4（和/或您要检查的任何其他条件）

开始了：

function callREST() {
  const app = document.getElementById('root'),
        preloader = document.getElementById('loader');

  preloader.setAttribute('style', 'display:block');

  while (app.firstChild) {
    app.removeChild(app.firstChild);
  }

  var inputForm = document.getElementById('zip');
  var code = inputForm.value;

  var request = new XMLHttpRequest();
  request.open('GET', 'Path to API URL' + code, true);

  request.onload = function() {

    // Begin accessing JSON data here
    var responseData = JSON.parse(this.response);
    var data = responseData.Agents.Agent;

    if (request.status >= 200 && request.status < 400) {

      var zip = responseData.Agents['@ZipCode'];

      if (typeof data == 'undefined' || zip != code) {
        const noData = document.createElement('div');
        noData.setAttribute('class', 'container text-center font-weight-bold pt-3');
        noData.textContent = 'No agent available.';
        app.appendChild(noData);
      } else if (zip === code) {

        for (var i = 0; i < data.length; i++) {
          var agent = data[i];

          const card = document.createElement('div');
          card.setAttribute('class', 'result');

        };
      }

    } else {
      const errorMessage = document.createElement('div');
      errorMessage.textContent = "Something is not right!";
      app.appendChild(errorMessage);
    }
  }


  request.send();

  request.onreadystatechange = function() {

      if (request.readyState === 4) {
          preloader.setAttribute('style', 'display:none');
      }
  }
}

<div id="wrapper">
  <main id="main">
    <form action="#" class="question-form">
      <h1>Enter your zip code</h1>
      <div class="form-group">
        <label for="zip">Zip Code</label>
        <input type="text" id="zip" class="form-control" oninput="zipData()">
      </div>
      <div class="button-holder">
        <button class="btn btn-primary" onclick="callREST()">Search</button>
      </div>
    </form>
    <div id="root"></div>
  </main>
  <div id="loader" class="loading-overlay" style="display:none;">
    <img src="images/spinner.svg" alt="image description">
  </div>
</div>