programing

Angular에서 $timeout을 사용하면 어떤 이점이 있습니까?window.setTimeout이 아닌 JS?

nicescript 2023. 2. 15. 23:07
반응형

Angular에서 $timeout을 사용하면 어떤 이점이 있습니까?window.setTimeout이 아닌 JS?

다음과 같은 타임아웃을 구현할 것을 제안했습니다.

  $timeout(function() {

    // Loadind done here - Show message for 3 more seconds.
    $timeout(function() {
      $scope.showMessage = false;
    }, 3000);

  }, 2000);
};

set Timeout을 사용하지 않고 이것을 사용하는 이유/장점에 대해 말씀해 주시겠습니까?

기본적인 말로 하자면$timeout의 경우 angularjs를 참조한다.setTimeout- JavaScript로 이동합니다.

그래도 사용할 생각이 있다면setTimeout따라서 호출할 필요가 있습니다.$scope.$apply()끝나고

사이드 노트로서

투고를 읽어보시길 권합니다.

그리고

예 1: $timeout

   $scope.timeInMs = 0;
  
    var countUp = function() {
        $scope.timeInMs+= 500;
        $timeout(countUp, 500);
    }    
    $timeout(countUp, 500); 

예 2: set Timeout (같은 로직)

 $scope.timeInMs_old = 0;
  
    var countUp_old = function() {
        $scope.timeInMs_old+= 500;        
        setTimeout(function () {
        $scope.$apply(countUp_old);
    }, 500);
    }
        
    setTimeout(function () {
        $scope.$apply(countUp_old);
    }, 500);

데모


$190은 약속도 반환합니다.

JS

function promiseCtrl($scope, $timeout) { 
 $scope.result = $timeout(function({ 
 return "Ready!"; 
 }, 1000); 
}

HTML

<div ng-controller="promiseCtrl"> 
 {{result || "Preparing…"}}
</div> 

$digest도 다이제스트 사이클을 트리거합니다.

서드파티 코드(Angular가 아님)가 있다고 생각합니다.JS) 일부 파일을 업로드하고 '진행' 비율의 콜백을 반환하는 Cloudinary 플러그인을 좋아합니다.

     // .....
     .on("cloudinaryprogress",
           function (e, data) {
               var name = data.files[0].name;
               var file_ = $scope.file || {};
               file_.progress = Math.round((data.loaded * 100.0) / data.total);
                               
                                
                $timeout(function(){
                     $scope.file = file_;
                }, 0);         
            })

UI를 업데이트하고 싶습니다. $scope.file = file_;

허전하다 $timeout다이제스트 사이클이 트리거되어$scope.file서드파티에 의해 갱신된 경우 GUI에서 재렌더됩니다.

  1. 콜백은 자동으로 시행/실행 블록으로 랩되며 $exception Handler 서비스 오류 처리: http://docs.angularjs.org/api/ng.$exceptionHandler
  2. 이는 약속을 반환하기 때문에 기존 콜백 방식보다 다른 약속 기반 코드와 더 잘 상호 운용되는 경향이 있습니다.콜백이 반환되면 반환된 값이 약속 해결에 사용됩니다.

AngularJS는 자체 이벤트 처리 루프를 제공하여 일반 JavaScript 플로우를 변경합니다.그러면 JavaScript가 Classical과 Angular로 분할됩니다.JS 실행 컨텍스트.Angular에 적용되는 작업만JS 실행 컨텍스트는 Angular의 이점을 얻을 수 있습니다.JS 데이터 바인딩, 예외 처리, 속성 감시 등

AngularJS $timeout 서비스를 사용하여,setTimeoutAngular에서 실행됩니다.JS 실행 컨텍스트.

상세한 것에 대하여는, 을 참조해 주세요.

언급URL : https://stackoverflow.com/questions/19609796/what-advantage-is-there-in-using-the-timeout-in-angularjs-instead-of-window-set

반응형