AngularJS $timeout

■ 참고
AnuglarJS $timeout Example
[AnuglarJS] 쉽지만 쉽지않은 $timeout 서비스
 
 
 

■ AngularJS의 $timeout은 javascript의 window.setTimeout을 사용하기 위한 AngularJS의 래퍼
 
 
 

■ 지연시간(딜레이)없이 즉시 console.log를 실행한다. 각 함수의 실행순서를 줄 때 사용한다.

$timeout(function() {
    console.log("실행...");
});

 
 
 

■ 1000밀리세컨드(1초)후 timer함수를 실행한다.

var timer = function() {
    console.log("1초 후 실행");
}

$timeout(timer, 1000);

 
 
 

■ 전체 소스, $timeout 테스트 시작 버튼을 클릭하면 테스트가 시작된다.

<!DOCTYPE html>
<html ng-app="myApp">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8">
<head>
<title></title>
<script src="/js/angularjs/1.5.6/angular.js"></script>
<script src='/js/jquery/jquery-1.11.0.min.js'></script>
<script>
var myApp = angular.module("myApp",[]);
myApp.controller("myAppCtrl", function($scope,$timeout){
	
	$scope.startTimeout = function() {
		
		$("#log").append("$timeout 테스트 시작<br/>");
		
		$timeout(function() {
			$("#log").append("$timeout 실행중...");
		},1000);

        //time
        $scope.time = 0;
        
        //timer callback
        var timer = function() {
            if( $scope.time < 5000 ) {
            
            	$("#log").append("<br/>timer time : " + $scope.time );
            	
                $scope.time += 1000;
                $timeout(timer, 1000);
            }
        }
        
        //run!!
        $timeout(timer, 1000);       
		
	};
	
});
</script>
</head>
<body ng-controller="myAppCtrl">
	<h1>
		AngularJS $timeout<br/>
		<font color="red">
			// 1초후 timer함수 실행<br/>
			$timeout(timer, 1000); 
		</font>
	</h1>
	<button ng-click="startTimeout()">$timeout 테스트 시작</button>
	<hr/>
	<div id="log"></div>
</body>
</html>

angularjs timeout

angularjs timeout


 
 
 

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다