رویدادهای زمانی در جاوا اسکریپت

به وسیله تابع های خاصی در جاوا اسکریپت، می توانید کاری کنید که کدهای شما در دوره های زمانی معین تکرار و اجرا شوند و یا یک کد و تابع پس از گذشت زمان معینی از لود شدن صفحه اجرا شود.

به این توابع در جاوا اسکریپت ، تابع های زمانی می گویند.

استفاده از تابع های زمانی در جاوا اسکریپت بسیار ساده است . دو تابع اصلی برای کار با رویدادهای زمانی در جاوا اسکریپت عبارتند از:

( ) setInterval : این تابع پس از گذشت یک مدت زمان معین ، به صورت دوره ای و متناوب ، یک تابع تعیین شده برای آن را اجرا می نماید.

( ) setTimeout : این تابع پس از گذشت مدت زمان تعیین شده برای آن پس از لود شدن صفحه ، فقط یکبار کد تابع مربوط به خود را اجرا می کند.

( ) setInterval و ( ) setTimeout ، متدهای شی HTML DOM Window هستند.

متد ( ) setInterval:

تابع ( ) setInterval ، به صورت متناوب و دوره ای ، پس از گذشت مدت زمان تعیین شده برای آن ، یک تابع یا کد را اجرا می کند و تا زمانی که به وسیله برنامه متوقف نشود ، به این کار ادامه خواهد داد

شکل کلی استفاده از این متد به صورت زیر است:

Syntax  setInterval ( ” javascript function name ” , milliseconds ) ;

مثال: setInterval ( ” MyFunction ” , 1000 ) ;

مثال: در مثال زیر با به کار بردن متد ( ) setInterval ، یک ساعت ساده دیجیتال ساخته شده است . به کد مثال دقت نمایید:

<p>   بر روی دکمه فرمان زیر کلیک نمایید تا ساعت شروع به کار کند</p>

<button onclick="myFunction( )"> نمایش ساعت </button>

<script type="text/javascript">

    function myFunction( )

        {

            setInterval("myTimer( )", 1000);

        }

</script>

<script type="text/javascript">

    function myTimer( )

        {

            var d = new Date( );

            var t = d.toLocaleTimeString( );

            document.getElementById("demo").innerHTML = t;

        }

</script>



<p id="demo">   </p>

چگونه اجرای یک تابع را متوقف سازیم ؟ – تابع ( ) clearInterval:

در هنگام کار با تابع ( ) setInterval ، متوجه شدید که این تابع به صورت متناوب و دوره ای ، یک کد یا تابع را پس از گذشت مدت زمان تعیین شده برای آن ، اجرا می کند . اگر کاربر یا برنامه این تابع را متوقف نسازد ، تا زمانی صفحه یا برنامه تحت وب در حال اجراست ، این تابع نیز اجرا شده و به کار خود ادامه خواهد داد.

اما زمانی می رسد که شاید شما بخواهید پروسه این تابع را متوقف سازید.

برای اینکه بتوانید سیر عملیات یک تابع ( ) setInterval را متوقف سازید ، باید یک متغیر سراسری ( Global ) را در صفحه تعریف کرده و تابع ( ) setIntetval خود را در آن بریزید . به عبارت دیگر ، به شکل زیر تابع ( ) setInterval را در یک متغیر خاص تعریف می کنید.

Syntax  یک متغیر = setInterval ( ” javascript function name ” , milliseconds ) ;

مثال: MyStop = setInterval ( ” MyFunction ” , 1000 ) ;

پس از اینکه تابع ( ) setInterval موردنظر خود را در یک متغیر تعریف کرده اید ، هر زمان که بخواهید آن تابع را متوقف سازید ، باید متغیر مرتبط به آن را به عنوان یک پارامتر ، همانند syntax جدول زیر ، به تابع ( ) clearInterval ، ارسال نمایید . در این صورت تابع از تکرار و تناوب باز خواهد ماند.

Syntax  clearInterval ( نام متغیر تابع مورد نظر ) ;

مثال: clearInterval ( MyStop ) ;

با ارائه یک مثال ، سعی کرده ایم تا نحوه متوقف سازی یک تابع ( ) setInterval را با استفاده از تابع ( ) clearInterval ، نمایش دهیم.

برای این منظور کد مثال قبل را تکرار کرده ایم ، ولی اینبار کد توقف را نیز به آن اضافه کررده ایم. برای توقف ساعت در حال کار بر روی دکمه فرمان Stop کلیک نمایید . به کد مثال دقت نمایید:

<p>   بر روی دکمه فرمان زیر کلیک نمایید تا ساعت شروع به کار کند

سپس در صورتی که خواستید ساعت متوقف شود ، بر روی دکمه فرمان توقف ساعت کلیک نمایید</p>

<button onclick="myFunction( )"> نمایش ساعت </button>

<button onclick="stopTimer( )"> توقف ساعت </button>

<script type="text/javascript">

        var MyStop ;

    function myFunction( )

        {

           MyStop = setInterval("myTimer( )", 1000);

        }

</script>

<script type="text/javascript">

    function myTimer( )

        {

            var d = new Date( );

            var t = d.toLocaleTimeString( );

            document.getElementById("demo").innerHTML = t;

        }

</script>



<script type="text/javascript">

    function stopTimer ( )

        {

            clearIntreval ( MyStop ) ;

        }

</script>



<p id="demo">   </p>


امیداوریم از مقاله رویدادهای زمانی در php بهره کافی را برده باشید