anglejs가 빠른 부분을 먼저 표시하고 느린 부분을 렌더링하는 방법은 무엇입니까?

나는 큰 angularjs html 페이지를 가지고 있습니다. angularjs 렌더링에는 많은 시간이 걸릴 것입니다. 따라서 페이지는 처음에는 거의 비어 있으며, 잠시 후 갑자기 모든 것을 보여줍니다.anglejs가 빠른 부분을 먼저 표시하고 느린 부분을 렌더링하는 방법은 무엇입니까?

빠른 파트를 먼저 표시하고 느린 파트를 나중에 표시하므로 사용자가 빈 페이지에 놀라지 않을지 궁금합니다. - "빠른 이름"과 "느린 이름"당신은 두 부분이있다 볼 수 있습니다

<!DOCTYPE html> 

<html ng-app> 
<head> 
    <meta charset="UTF-8"> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js"></script> 
</head> 
<body ng-controller="Ctrl"> 
<button ng-click="go()">Go</button> 
<hr/> 
<div>Fast</div> 
<button ng-repeat="name in fastNames">{{name}}</button> 
<hr/> 
<div>Slow</div> 
<button ng-repeat="name in slowNames">{{name}}</button> 
</body> 
</html> 
<script type="text/javascript"> 
    function Ctrl($scope) { 
     $scope.fastNames = []; 
     $scope.slowNames = []; 

     $scope.go = function() { 
      $scope.fast(); 
      $scope.slow(); 
     } 

     $scope.fast = function() { 
      $scope.fastNames = ["F1", "F2"]; 
     }; 

     $scope.slow = function() { 
      for (var i = 0; i < 50000000; i++) { 
      new Date(); 
      } 
      $scope.slowNames = ["S1", "S2"];   
     } 


    } 
</script>

나는 간단한 데모를했다. 빠른 이름이 가능한 한 빨리 표시되고 느린 이름이 표시되기를 바랍니다. 그러나 지금은 처음에는 보여주지 않을 것이며, 잠시 후에 그들은 함께 보여줄 것입니다. http://plnkr.co/edit/9lW2TbLBkCB1hhgBVGmo?p=preview

어떻게해야합니까 :

나는 라이브 데모를 만들어?

출처

2013-02-21 Freewind

이동()가 반환까지,보기는 업데이트되지 않습니다. gofast()와 goslow() 두 부분으로 go() 함수를 나눕니다. goslow()가 시작되기 전에 gofast()가 돌아가도록 타임 아웃이나 뭔가를 호출하십시오. –

작동하는 것처럼 보입니다 : , 그러나 그것을하는 "angularjs way"입니까? '$ scope. $ digest()'를 수동으로 추가해야합니다. – Freewind

방금 Chrome에서 작동하지만 Firefox에서는 작동하지 않는 것으로 나타났습니다. – Freewind

주석에서 언급했듯이 브라우저는 go()이 반환 될 때까지 렌더링 할 수 없습니다 (JavaScript는 단일 스레드 임). go() 함수를 분할하고 느린 부분을 $ timeout을 통해 비동기 적으로 호출되는 별도의 함수에 넣습니다. 브라우저가 $ timeout 콜백을 호출하기 전에 렌더 할 수있는 기회를 갖게하려면 $ timeout에 50ms의 지연을 주어야합니다.

$scope.go = function() { 
    $scope.fast(); 
    $timeout(function() { 
     $scope.slow(); 
    },50); // give browser time to render 
};

Plunker

출처

2013-02-21 18:39:45

가장 좋은 시간 초과 지연을 결정하는 방법은 무엇입니까? '50ms'는 주요 브라우저에서 항상 작동합니까? – Freewind

@Freewind, 브라우저가 렌더링을 끝내면 언제 알 수있는 방법이 없습니다. 이 게시물 http://stackoverflow.com/questions/11125078/is-there-a-post-render-callback-for-angular-js-directive에서 Nic은 주기적으로 렌더링이 완료되었는지 확인하기 위해 DOM에서 무언가를 검사했습니다. –

anglejs가 빠른 부분을 먼저 표시하고 느린 부분을 렌더링하는 방법은 무엇입니까?

답변

관련 문제