[angular js] $timeout, $interval , $scope 서비스

참조

$timeout([fn], [delay], [invokeApply], [Pass]);

fn
지연 실행되어야 할 함수
delay
지연시키는 시간(millisecond)
invokeApply
만약 false로 설정하면 model dirty check를 생략, true이면 $apply에서 fn을 실행한다.

 

반환값
Promise객체. delay시간에 도달했을 때 Promise가 resolve되고 Promise는 fn함수의 반환값을 반환한다.

$timeout.cancel([promise]);

promise 관련 작업을 취소하는 메서드. promise는 reject 된다.

이 메서드 실행시 $timeout

<script>
  angular.module('intervalExample', [])
    .controller('ExampleController', ['$scope', '$interval',
      function($scope, $interval) {
        $scope.format = 'M/d/yy h:mm:ss a';
        $scope.blood_1 = 100;
        $scope.blood_2 = 120;

        var stop;
        $scope.fight = function() {
          // Don't start a new fight if we are already fighting
          if ( angular.isDefined(stop) ) return;

          stop = $interval(function() {
            if ($scope.blood_1 > 0 && $scope.blood_2 > 0) {
              $scope.blood_1 = $scope.blood_1 - 3;
              $scope.blood_2 = $scope.blood_2 - 4;
            } else {
              $scope.stopFight();
            }
          }, 100);
        };

        $scope.stopFight = function() {
          if (angular.isDefined(stop)) {
            $interval.cancel(stop);
            stop = undefined;
          }
        };

        $scope.resetFight = function() {
          $scope.blood_1 = 100;
          $scope.blood_2 = 120;
        };

        $scope.$on('$destroy', function() {
          // Make sure that the interval is destroyed too
          $scope.stopFight();
        });
      }])
    // Register the 'myCurrentTime' directive factory method.
    // We inject $interval and dateFilter service since the factory method is DI.
    .directive('myCurrentTime', ['$interval', 'dateFilter',
      function($interval, dateFilter) {
        // return the directive link function. (compile function not needed)
        return function(scope, element, attrs) {
          var format,  // date format
              stopTime; // so that we can cancel the time updates

          // used to update the UI
          function updateTime() {
            element.text(dateFilter(new Date(), format));
          }

          // watch the expression, and update the UI on change.
          scope.$watch(attrs.myCurrentTime, function(value) {
            format = value;
            updateTime();
          });

          stopTime = $interval(updateTime, 1000);

          // listen on DOM destroy (removal) event, and cancel the next UI update
          // to prevent updating time after the DOM element was removed.
          element.on('$destroy', function() {
            $interval.cancel(stopTime);
          });
        }
      }]);
</script>

에 지정한 fn의 작업이 아직 실행되지 않고 취소해 성공했을 경우에는 true를 반환

$timeout.flush()

테스트에서는 defferred 함수의 큐를 동시에 수행하기 위해 $timeout.flush()를 사용

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

 

$interval(fn, delay, [count], [invokeApply], [Pass]);

fn = function

반복적으로 호출해야 하는 함수. 추가 인수가 전달되지 않으면 현재 반복횟수가 함수로 호출

 delay = function을 호출하는 시간간격 (millisecond)

 count(필수X 옵션) = 반복횟수 , 안쓰거나 0으로 해놓으면 무한반복 기본설정은 0
 invokeApply (옵션) = false로 설정하면 dirty checking(값 변화가 있으면 갱신 - ex 양방향 데이터 바인딩)을 건너 뛴다. 기본 true
Pass(옵션) = 추가 파라미터
 

$interval.cancel([promise]);

취소

3. example
 
var interval; // promise를 담는 변수
interval = $interval(function(){
    $scope.example();
},50);
// 50 milliseconds 마다 example() 호출,  변수 interval에 담은 이유는 나중에 정지시키기 위해
 
$scope.example = function(){
    if(조건){
        //위에서 변수에 담은 interval을 넘겨줌 반복하다 특정 조건에서 정지시키기 위해 사용
        $interval.cancel(interval);
    }
}

// scope이 제거된다(destroy)고 해도 interval은 멈추지 않는다
// 따라서 $scope이 destroy될 때 interval을 멈추도록 한다.
$scope.$on('$destroy', function() { 
     $interval.cancel(interval);
});