AngularJS - 계산 무거운 작업

Question

계산 작업이 많은 작업의 경우 각도 응용 프로그램에 패턴이 있습니까? (단지 $ 지연 시간을 0으로 설정하여 호출 스택에서 빠져 나갈 수 있습니다.) $ timeout을 사용하더라도 처리 자체가 시작될 때 UI가 응답하지 않는 것처럼 보입니다. 웹 워커 (Web Workers) 또는 그와 비슷한 것을보아야합니까? 그것, 또는 거기에 "각도 방법?"

Answer 1

JavaScript가 단일 스레드이기 때문에 계산을 서버 측에서 수행하거나 처리 사이에 시간 초과를 수행해야합니다 (밑줄 defer(), http://underscorejs.org/#defer 참조). 그렇지 않으면 UI가 필연적으로 차단됩니다.

Answer 2

루프를 통과 할 때마다 각도 $timeout을 사용하는 특수 루프 함수를 만들어 UI 응답 성 문제를 해결할 수있는 방법을 찾았습니다.

app.service('responsivenessService', function($q, $timeout) { 
    var self = this; 

    // Works like Underscore's map() except it uses setTimeout between each loop iteration 
    // to try to keep the UI as responsive as possible 
    self.responsiveMap = function(collection, evalFn) 
    { 
     var deferred = $q.defer(); 

     // Closures to track the resulting collection as it's built and the iteration index 
     var resultCollection = [], index = 0; 

     function enQueueNext() { 
      $timeout(function() { 
       // Process the element at "index" 
       resultCollection.push(evalFn(collection[index])); 

       index++; 
       if (index < collection.length) 
        enQueueNext(); 
       else 
       { 
        // We're done; resolve the promise 
        deferred.resolve(resultCollection); 
       } 
      }, 0); 
     } 

     // Start off the process 
     enQueueNext(); 

     return deferred.promise; 
    } 
    return self; 
}); 

이 매핑 함수는 $scope에 할당 할 수있는 약속을 반환합니다. 사용법은 새로운 브라우저에서 밑줄 또는 기본 자바 스크립트 배열에서 map() 기능과 유사합니다 원래 (전체 UI 이제 백그라운드에서 실행 표시를 차단 한 것

$scope.results = responsivenessService.responsiveMap(initialdata, function() { 
    // Long-running or computationally intense code here 
    return result; 
}); 

코드는 응용 프로그램을 호출 같은 환상은의 본질적 있지만, . 이전 응용 프로그램에서 주기적으로 .DoEvents). 장시간 실행되는 코드가 루핑 map() 스타일 연산에 도움이되는 한 멋지고 일반적인 코드입니다.