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

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

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

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

( ) 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 بهره کافی را برده باشید

دیدگاه‌ خود را بیان کنید

اشتراک در
اطلاع از
guest

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها
سبد خرید0
There are no products in the cart!