تبلیغات متنی و بنر

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

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

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

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

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

متد ( ) setInterval :

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

Syntax setInterval ( " javascript function name " , milliseconds ) ;
مثال : setInterval ( " MyFunction " , 1000 ) ;

در جدول زیر به توضیح موارد syntax پرداخته ایم :

syntax توضیح هر یک از موارد
توضیح پارامتر
این پارامتر تعیین کننده نام تابعی است که این متد آن را به صورت متناوب و دوره ای اجرا خواهد کرد . این نام باید در بین دو علامت " " قرار بگیرد . " javascript function name "
این پارامتر عددی تعیین کننده مدت زمانی است که متد ( ) setInterval ، تابع خود را پس از گذشت آن به صورت دوره ای اجرا می کند .
واحد این پارامتر بر حسب میلی ثانیه است . 		milliseconds

مثال : در مثال زیر با به کار بردن متد ( ) 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> 		کد
مشاهده خروجی مثال

خروجی

راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی

نظر خودتان درباره این صفحه را با ما در میان بگذارید :

آیا مطالب این صفحه برای شما مناسب و مفید بود ه است :

نام :               
آدرس Email :  

نظر شما :  

سوال امنیتی : پایتخت ایران ؟