как показать время обратного отсчета в угловом приложении при загрузке приложения - PullRequest
0 голосов
/ 10 мая 2018

Я хочу показать загрузчик, который покажет время в секундах при загрузке приложения.Вот код

HTML

<body>
  <div class="app-loader">
    <div class="loader-spinner">
      <div class="loading-text"></div>
    </div>
  </div>
  <angular-app></angular-app>
</body>

Javascript

(function loader() {
    var elAppLoader = document.querySelector("app-loader");
    var startTime = new Date();

    var counter = setInterval(() => {
       var seconds = Math.abs((new Date().getTime() - startTime.getTime()) / 1000);
       var elLoadingText = document.querySelector(".loading-text");
       elLoadingText.innerHTML = seconds.toFixed(2) + " s";
    }, 100);

    elAppLoader.addEventListener('app-loaded', function (event) {
      clearInterval(counter);
      elAppLoader.remove();
    });
})();

Теперь это работает нормально и показывает нетсекунд на экране после каждых 100 мс, но когда угловая загрузка начинается, счетчик останавливается, пока угловой не загружается.

Как я могу решить эту проблему?Это потому, что JS является однопоточным, если так, есть ли способ достичь этого?

1 Ответ

0 голосов
/ 10 мая 2018

Да, это потому, что браузер занят синтаксическим анализом и загрузкой всех js.

Способ решить эту проблему - использовать веб-работника.

Подробнее об этом здесь: https://www.w3schools.com/html/html5_webworkers.asp Имеется пример рабочего таймера, который подходит для вашего случая.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...