بررسی سرویس $interval در فریم ورک AngularJS

بررسی سرویس $interval در فریم ورک AngularJS

در این پست از وبسایت پرووید، در رابطه با بررسی سرویس $interval در فریم ورک AngularJS صحبت خواهیم کرد. به ادامه ی مطلب بروید.

در این قسمت از سری آموزشی کامل AngularJS از وب سایت پرووید در رابطه با سرویس $interval صحبت خواهیم کرد، که همان کاری را انجام می دهد که متد setInterval() در جاوااسکریپت انجام می دهد. در رابطه با جاوا اسکریپت می توانید از بسته ی آموزش ویدئویی جاوا اسکریپت استفاهد کنید.

بسته ی آموزش ویدئویی ساخت وب اپلیکیشن Full-stack با Angular و ASP.NET Core و EF Core

از شما دعوت می کنیم که از بسته ی آموزش ویدئویی ساخت وب اپلیکیشن Full-stack با Angular و ASP.NET Core و EF Core دیدن کنید.

به عبارت دیگر سرویس $interval یک Wrapper برای متد setInterval() است. این موضوع باعث می شود که سرویس $interval به راحتی Override و یا حذف شود و یا در عملیات تست نرم افزار Mock بشود. تست نرم افزار موضوع بسیار مهمی است. در رابطه با تست نرم افزار می توانید از بسته ی آموزش ویدئویی پیشرفته ی Unit Testing در تست نرم افزار استفاده کنید.

سرویس $interval یک Function را که برای آن تعریف شده است را در مدت زمانی که مشخص شده است، اجرا می کند. در کد زیر املا و یا Signature مربوط به این سرویس را مشاهده می کنید.

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

بسته ی آموزش ویدئویی ساخت وب اپلیکیشن Full-stack با Angular 2 و ASP.NET Core

از شما دعوت می کنیم که از بسته ی آموزش ویدئویی ساخت وب اپلیکیشن Full-stack با Angular 2 و ASP.NET Core دیدن کنید.

کدی که در قسمت زیر مشاهده می کنید نحوه استفاده از سرویس $interval برای نشان دادن یک شمارنده و یا Counter به ازای هر 1000 میلی ثانیه را نشان میدهد.

<!DOCTYPE html>
<html >
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-app="myApp">
    <div ng-controller="myController">
        {{counter}} 
    </div>
    <script>
        var myApp = angular.module('myApp', []);

        myApp.controller("myController", function ($scope, $interval) {
            $scope.counter = 0;

            var increaseCounter = function () {
                $scope.counter = $scope.counter + 1;
            }

            $interval(increaseCounter, 1000);        
        });
    </script>
</body>
</html>

در مثالی که در قسمت بالا دیدید، سرویس $interval یک Function با نام increaseCounter() را به ازای هر 1000 میلی ثانیه صدا می زند. این Function یک Property با نام Counter را که در $scope تعریف شده است، به اندازه یک واحد افزایش می دهد. بنابراین شمارنده و یا Counter به ازای هر یک ثانیه و یا 1000 میلی ثانیه یک واحد افزایش پیدا می کند.

تنظیم تعداد دفعات تکرار اجرا (Execution Count)

با استفاده از سرویس $interval می توان تعداد دفعاتی که یک Function نیاز است که اجرا بشود را نیز مشخص نمود. این موضوع با استفاده از پارامتر count تنظیم می شود. کد زیر این موضوع را نشان می دهد.

<!DOCTYPE html>
<html >
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-app="myApp">
    <div ng-controller="myController">
        {{counter}} 
    </div>
    <script>
        var myApp = angular.module('myApp', []);

        myApp.controller("myController", function ($scope, $interval) {
            $scope.counter = 0;

            var increaseCounter = function () {
                $scope.counter = $scope.counter + 1;
            }

            $interval(increaseCounter, 1000, 10);
        });
    </script>
</body>
</html>

کدی که در قسمت بالا مشاهده می کنید، باعث می شود که متد increaseCounter() هر 1000 میلی ثانیه یکبار اجرا بشود. البته این موضوع فقط به اندازه 10 بار تکرار خواهد شد.

بسته ی آموزش ویدئویی شروع به کار با Angular 2

از شما دعوت می کنیم که از بسته ی آموزش ویدئویی شروع به کار با Angular 2 دیدن کنید.

کنسل کردن اجرا

در زمان استفاده از سرویس $interval یک Object از نوع HttpPromise برای ما Return می شود که می توانیم با استفاده از آن شمارنده و یا Counter را متوقف کنیم. این موضوع با استفاده از متد $interval.cancel(promise) اتفاق می افتد. کد زیر نحوه انجام این کار را نشان می دهد.

<!DOCTYPE html>
<html >
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-app="myApp">
    <div>
        <div ng-controller="myController">
            {{counter}} <br /><br />
            <button ng-click="cancel()">Cancel</button>
        </div>

    </div>
    <script>
        var myApp = angular.module('myApp', []);
        
        myApp.controller("myController", function ($scope, $interval) {
             $scope.counter = 0;

            var increaseCounter = function () {
                $scope.counter = $scope.counter + 1;
            }

            var promise = $interval(increaseCounter, 1000);
        
            $scope.cancel = function () {
                $interval.cancel(promise);
                
                $scope.counter = "Cancelled!";
            };

        });
    </script>
</body>
</html>

امیدواریم که این آموزش از وبسایت پرووید نیز مورد توجه تمامی دوستان عزیز قرار گرفته باشد. از شما دعوت می‌کنیم که از دیگر آموزش های ما در رابطه با فریم ورک Angular استفاده کنید. لیست کامل این آموزش ها را می توانید در پست مربوط به آموزش کامل برنامه نویسی تحت وب با Angular مشاهده کنید.

مرتضی گیتی
بدون نظر

ارسال نظر

نظر
نام
ایمیل
وب سایت