加载应用程序时如何在角度应用程序中显示时间倒计时答案

【问题标题】：how to show time count down in angular app while loading of the app加载应用程序时如何在角度应用程序中显示时间倒计时
【发布时间】：2018-10-20 17:12:10
【问题描述】：

我想显示加载程序，它会在加载应用程序时以秒为单位显示时间。这是代码

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是单线程的，如果是的话有什么办法可以实现吗？

【问题讨论】：

你在中是否有？如果是这样，请将其移动到 index.html 的正文中。
@JoshuaChan 问题已更新！
计数器在 Angular 加载时冻结，在加载应用程序后被删除？如果是这样，我相信网络工作者应该是要走的路。

标签： javascript angular

【解决方案1】：

是的，这是因为浏览器正忙于解析 Angular 和所有加载的 js。

解决这个问题的方法是使用 web worker。

在此处了解更多信息：https://www.w3schools.com/html/html5_webworkers.asp 它有一个适合您情况的工作计时器示例

【讨论】：

你能提供代码吗，我不想为网络工作者创建额外的苍蝇