javascript - 如何在加载 DOM 后停止微调器

Question

我正在加载大量数据，即使在收到数据后，似乎也需要几秒钟来绘制页面。

我正在简化下面的代码，所以请原谅这个玩具示例中的任何语法错误。 我的 angularjs 代码的结构或多或少是这样的

$scope.isLoading = true;
$http.get(url)
  .then(function(resp) {
    $scope.mydata = resp.data;
  })
  .finally(function() {
    $scope.isLoading = false;
  })

我的 html 是

<div class="spinner" ng-show="isLoading">
...
<!-- lots of data and complex DOM manipulation below -->

我也试过

<div class="spinner" ng-hide="mydata">
...
<!-- lots of data and complex DOM manipulation below -->

在这两种情况下，我都会得到一个微调器，然后微调器消失，然后几秒钟过去，数据最终显示出来。如果数据较小，则延迟不太明显。

当我查看浏览器的开发人员工具时，收到数据并且微调器立即消失。然后在页面最终加载之前发生多秒延迟。所以我怀疑浏览器正在尝试编写 DOM

我想缩短微调器消失和页面出现之间的延迟。

在编写完所有 DOM 后是否会调用某种 Hook /回调？

Answer 1

由于视觉延迟是由 DOM 在摘要上同步更新并阻塞主线程这一事实引起的，因此应该至少推迟 spinner 移除一个 tick:

$http.get(url)
  .then(function(resp) {
    $scope.mydata = resp.data;
  })
  .finally(function() {
    return $timeout(function () {
      $scope.isLoading = false;
    })
  })

超时延迟可以增加到非零值(例如 20)，具体取决于导致卡住的应用程序部分的工作方式。由 $timeout 引起的新摘要可能会导致新的卡住，因此该问题可能应该通过优化来解决。