13 - $timeout and $interval services
AngularJS has two timer services, $timeout and $interval, which you can use to call functions in your application. The $timeout and $interval services are similar in their functionality to JavaScript's setTimeout() and setInterval()functions (actually belonging to the window object). The functionality of these services is also similar, so I will cover both in this text.
( AngularJS 2 önemli timer service'e sahiptir: $timeout and $interval. Bu 2 service kullanarak Javascript fonksyionlarının belirli zamanlarda otomatik olarak çalışmasını tetikleyebiliriz. Javascript'deki window object'indeki setTimeOut() ve setInterval() fonksiyonlarına çok benzer. )
$timeout
The $timeout service can be used to call another JavaScript function after a given time delay. The $timeout service only schedules a single call to the function. For repeated calling of a function, see $interval later in this text. ( Verilen bir süre sonunda bir Javascript fonksiyonunun bir defa çağırılmasını istiyorsak $timeout service'i kullanırız. Bir Javascript fonksiyonunun belirli aralıklarla sürekli olarak çağırılmasını istiyorsak, örneğin dakikada bir veya saatte bir, $interval service'i kullanmalıyız.)
Injecting $timeout
To use the $timeout service you must first get it injected into a controller function. Here is an example that injects the $timeout service into a controller function:
($timeout service'i kullanabilmek için önce controller fonksiyonuna timeout service'i inject etmeliyiz. Aşağıdaki örneği inceleyelim.)
var myapp = angular.module("myapp", []);
myapp.controller("MyController", function($scope, $timeout){
});
Notice the $timeout parameter of the controller function. Into this parameter the$timeout service will be injected by AngularJS, just like any other AngularJS service you would want to use in your controller function. ( Controller fonksiyonumuzda kullanmak istediğimiz tüm service'leri bu örnekteki gibi controller fonksiyonumuza inject etmeliyiz. )
Scheduling a Function Call
Once the $timeout service is injected into your controller function, you can use it to schedule function calls. Here is an example that used the $timeout service to schedule a function call 3 seconds later:
( timeout service'i controller fonksiyonumuza inject ettik, artık timeout service'i controller fonksiyonumuzda kullanabiliriz. Aşağıdaki örnekte 3000 milisaniye yani 3 saniye sonra timeout gerçekleşecek dolayısıyla timeout service'in aldığı ilk parametre olan callAtTimeout isimli Javascript fonksiyonu çağırılacaktır. Bu örnekte, timeout service'e ilk parameter olarak verdiğimiz fonksiyon, controller'ımızın scope'u dışında tanımlanmış bir fonksiyondur.)
var myapp = angular.module("myapp", []);
myapp.controller("MyController", function($scope, $timeout){
$timeout(callAtTimeout, 3000);
});
function callAtTimeout() { // controller'ımızın scope'u dışında bir fonksiyon tanımladık.
console.log("Timeout occurred");
}
This example schedules a function call to callAtTimeout() after 3 seconds (3000 milliseconds).
$interval
The $interval service is similar in function to the $timeout service, except it schedules a function for repeated execution with a time interval in between.
Injecting $interval
To use the $interval service you must have it injected into a controller function. Here is an example that injects the $interval service into a controller function:
var myapp = angular.module("myapp", []);
myapp.controller("MyController", function($scope, $interval){
});
As you can see, it is very similar to how you inject any other service in AngularJS.
Scheduling a Repeated Function Call
Once the $interval service is injected into your controller function, you can use it to schedule repeated function calls. Here is an example that used the$interval service to schedule a function call every 5 seconds:
var myapp = angular.module("myapp", []);
myapp.controller("MyController", function($scope, $interval){
$interval(callAtInterval, 5000);
});
function callAtInterval() {
console.log("Interval occurred");
}
This example schedules a function call to callAtInterval() every 5 seconds (5000 milliseconds).
If you want to call a function on the $scope object instead, you can do so like this:
var myapp = angular.module("myapp", []);
myapp.controller("DIController", function($scope, $interval){
$scope.callAtInterval = function() {
console.log("$scope.callAtInterval - Interval occurred");
}
$interval( function(){ $scope.callAtInterval(); }, 3000);
});
The function passed to the $interval service calls the callAtInterval() function on the $scope object.
Executing $digest() After the Scheduled Function Call
If the function you schedule for execution makes changes to variables in the $scope object, or make changes to any other variable which your application is watching, your application needs to execute $scope.$digest() after the scheduled function call finishes. Why that is necessary is explained in my tutorial about $watch(), $digest() and $apply().
By default AngularJS already calls $digest() after the scheduled function call finishes, so you don't have to do that explicitly. You can, however, specify if AngularJS should not call $digest() after the scheduled function call. If, for instance, your scheduled function call only updates an animation but does not change any $scope variables, then it is a waste of CPU time to call $digest()after the function finishes.
Both $timeout and $interval have a third, optional parameter which can specify if the $digest() method is to be executed after the scheduled function finishes. Actually, the third parameter specifies if the call to the scheduled function should be done inside an $apply() call. Here is an example of how to use this third parameter:
$interval( function(){ $scope.callAtInterval(); }, 3000, true);
$interval( function(){ $scope.callAtInterval(); }, 3000, false);
These two $interval examples both have a third parameter passed to the $interval service. This parameter can be either true or false. A value of true means that the scheduled function should be called inside an $apply() call. A value of false means that it should not be called inside an $apply() call (meaning $digest() will not get called after the scheduled function finishes).
14 - $timeout ve $interval service örnekleri - helloAngular16 & helloAngular17
http://www.w3schools.com/angular/angular_services.asp
No comments:
Post a Comment