خانه / مقالات اموزشی / اموزش جاوا اسكريپت / رويداد هاي زماني در جاوا اسكريپت

رويداد هاي زماني در جاوا اسكريپت

ﺩﺭﺱ ﭘﺎﻧﺰﺩﻫﻢ- ﺭﻭﻳﺪﺍﺩ ﻫﺎﯼ ﺯﻣﺎﻧﯽ

ﺩﺭ ﺍﻳﻦ ﺩﺭﺱ ﻣﯽ‌ﺧﻮﺍﻫﻴﻢ ﺩﺭ ﻣﻮﺭﺩ ﺭﻭﻳﺪﺍﺩﻫﺎﯼ ﺯﻣﺎﻧﯽ ﻭ ﺍﺟﺮﺍﯼ ﮐﺪ‌ﻫﺎ ﺩﺭ ﻓﻮﺍﺻﻞ ﺯﻣﺎﻧﯽ ﻣﺘﻔﺎﻭﺕ ﺷﺮﺡ ﺑﺪﻫﻴﻢ.

ﺭﻭﻳﺪﺍﺩﻫﺎﯼ ﺯﻣﺎﻧﯽ ﺩﺭ ﺟﺎﻭﺍ ﺍﺳﮑﺮﻳﭙﺖ
ﻳﮑﯽ ﺩﻳﮕﺮ ﺍﺯ ﻗﺎﺑﻠﻴﺖ‌ﻫﺎﯼ ﺟﺎﻭﺍ ﺍﺳﮑﺮﻳﭙﺖ ﺍﺟﺮﺍﯼ ﮐﺪﻫﺎﯼ ﺁﻥ ﺩﺭ ﻓﻮﺍﺻﻞ ﻣﺨﺘﻠﻒ ﺍﺳﺖ. ﺑﻪ ﺍﻳﻦ ﻋﻤﻞ ﺩﺭ ﺍﺻﻞ ﺭﻭﻳﺪﺍﺩ ﺯﻣﺎﻧﯽ ﻣﯽ‌ﮔﻮﻳﻨﺪ. ﺍﻳﻦ ﻳﻌﻨﯽ ﺑﺮﺍﯼ ﺍﺟﺮﺍﯼ ﮐﺪ‌ﻫﺎ ﺯﻣﺎﻥ ﺑﻨﺪﯼ ﻭﻳﮋﻩ‌ﺍﯼ ﺑﺎ ﺍﻧﺘﺨﺎﺏ ﺧﻮﺩ ﺗﻌﻴﻴﻦ ﮐﻨﻴﻢ. ﺍﻧﺠﺎﻡ ﺯﻣﺎﻥ ﺑﻨﺪﯼ ﺩﺭ ﺟﺎﻭﺍ ﺍﺳﮑﺮﻳﭙﺖ ﺑﺴﻴﺎﺭ ﺳﺎﺩﻩ ﺍﺳﺖ ﮐﺎﻓﻴﺴﺖ ﮐﻪ ﺗﻨﻬﺎ ﺍﺯ ﺩﻭ ﻣﺘﺪ ﻣﻮﺭﺩ ﻧﻈﺮ ﺑﺮﺍﯼ ﺍﻳﻦ ﮐﺎﺭ ﺍﺳﺘﻔﺎﺩﻩ ﮐﻨﻴﻢ. ﺍﻳﻦ ﺩﻭ ﻣﺘﺪ ﻋﺒﺎﺭﺗﻨﺪ ﺍﺳﺖ ﺍﺯ:

۱٫etInterval() // ﺍﺟﺮﺍ ﻳﮏ ﺗﺎﺑﻊ، ﺑﺎﺭﻫﺎ ﻭ ﺑﺎﺭﻫﺎ ﻭ ﺩﺭ ﻓﻮﺍﺻﻞ ﺯﻣﺎﻧﯽ ﻣﺸﺨﺺ

۲٫setTimeout() // ﺍﺟﺮﺍ ﻳﮏ ﺗﺎﺑﻊ، ﻳﮏ ﺑﺎﺭ ﭘﺲ ﺍﺯ ﺍﻧﺘﻈﺎﺭ ﺗﻌﺪﺍﺩ ﻣﺸﺨﺼﯽ ﺍﺯ ﻣﻴﻠﯽ ﺛﺎﻧﻴﻪ

ﻧﮑﺘﻪ: ﻫﺮ ﺩﻭ ﺍﻳﻦ ﻣﺘﺪ‌ﻫﺎ ﺍﺯ ﻣﺘﺪﻫﺎﯼ ﺁﺑﺠﮑﺖ ﭘﻨﺠﺮﻩ (window) ﺩﺭ DOM ﺍﭺ ﺗﯽ‌ ﺍﻡ ﺍﻝ ﻫﺴﺘﻨﺪ.

ﻣﺘﺪ setInterval
ﺍﻳﻦ ﻣﺘﺪ ﺑﺮﺍﯼ ﺯﻣﺎﻥ ﻣﺸﺨﺼﯽ -ﮐﻪ ﺑﺮﻧﺎﻣﻪ ﻧﻮﻳﺲ ﺗﻌﻴﻴﻦ ﻣﯽ‌ﮐﻨﺪ- ﻣﻨﺘﻈﺮ ﻣﯽ‌ﻣﺎﻧﺪ ﻭ ﺳﭙﺲ ﮐﺪ‌ﻫﺎ (ﺗﺎﺑﻊ) ﺭﺍ ﺍﺟﺮﺍ ﻣﯽ‌ﮐﻨﺪ ﻭ ﺩﻭﺑﺎﺭﻩ ﺍﺩﺍﻣﻪ ﺑﻪ ﺗﻮﻗﻒ ﻭ ﺍﺟﺮﺍ ﺑﺮ ﺍﺳﺎﺱ ﺯﻣﺎﻥ ﺍﻧﺘﻈﺎﺭ ﺗﻌﻴﻴﻦ ﺷﺪﻩ ﻣﯽ‌ﺩﻫﺪ. ﻳﻌﻨﯽ ﺍﺟﺮﺍﯼ ﺗﺎﺑﻊ ﻭ ﺗﻮﻗﻒ، ﺩﻭﺑﺎﺭﻩ ﺍﺟﺮﺍﯼ ﺗﺎﺑﻊ ﻭ ﺗﻮﻗﻒ، ﺍﻳﻦ ﺭﻭﺍﻝ ﺑﺮﺍﯼ ﻫﻤﻴﺸﻪ ﺍﺩﺍﻣﻪ ﺩﺍﺭﺩ. ﺷﻴﻮﻩ ﻧﻮﺷﺘﻦ ﺍﻳﻦ ﻣﺘﺪ ﺑﻪ ﺷﮑﻞ ﺯﻳﺮ ﺍﺳﺖ:

window.setInterval( ” ﺗﺎﺑﻊ ﺟﺎﻭﺍ ﺍﺳﮑﺮﻳﭙﺖ ” , ﺯﻣﺎﻥ ﺑﻪ ﻭﺍﺣﺪ ﻣﻴﻠﯽ ﺛﺎﻧﻴﻪ );

ﻫﻤﺎﻧﻄﻮﺭ ﮐﻪ ﻣﯽ‌ﺑﻴﻨﻴﺪ ﺩﺭ ﺟﻠﻮﯼ ﻣﺘﺪ setInterval ﺍﺯ ﮐﻠﻤﻪ window ﺍﺳﺘﻔﺎﺩﻩ ﺷﺪﻩ ﺍﺳﺖ ﮐﻪ ﻧﺸﺎﻥ ﺩﻫﻨﺪﻩ ﺍﻳﻦ ﻣﻄﻠﺐ ﺍﺳﺖ ﮐﻪ ﺍﻳﻦ ﻣﺘﺪ ﺍﺯ ﻣﺘﺪﻫﺎﯼ ﺁﺑﺠﮑﺖ ﭘﻨﺠﺮﻩ (window) ﺍﺳﺖ. ﺍﻟﺒﺘﻪ ﻧﻮﺷﺘﻦ ﮐﻠﻤﻪ window ﺿﺮﻭﺭﯼ ﻧﻴﺴﺖ ﺍﻣﺎ ﺑﻬﺮ ﺣﺎﻝ ﺑﺎﻳﺪ ﺩﺍﻧﺴﺖ ﮐﻪ ﻣﺘﺪ setInterval ﺍﺯ ﻣﺘﺪﻫﺎﯼ ﺍﻳﻦ ﺁﺑﺠﮑﺖ ﺍﺳﺖ.

ﺍﻳﻦ ﻣﺘﺪ ﺩﺍﺭﺍﯼ ﺩﻭ ﻭﺭﻭﺩﯼ ﻳﺎ ﭘﺎﺭﺍﻣﺘﺮ ﺍﺳﺖ ﮐﻪ ﺍﻭﻟﻴﻦ ﺁﻥ ﻳﮏ «ﺗﺎﺑﻊ» ﻭ ﺩﻭﻣﻴﻦ ﺁﻥ ﻣﺪﺕ «ﻓﺎﺻﻠﻪ ﺯﻣﺎﻧﯽ» ﺗﻌﻴﻴﻦ ﺷﺪﻩ ﺑﺮﺍﯼ ﺍﻳﺠﺎﺩ ﺗﻮﻗﻒ ﺩﺭ ﺑﻴﻦ ﺍﺟﺮﺍﻫﺎﯼ ﺗﺎﺑﻊ ﻫﺴﺘﻨﺪ.

ﻧﮑﺘﻪ: ﻫﺮ ﺛﺎﻧﻴﻪ، ۱۰۰۰ ﻣﻴﻠﯽ ﺛﺎﻧﻴﻪ ﺍﺳﺖ.

ﻓﺮﺽ ﮐﻨﻴﺪ ﻣﯽ‌ﺧﻮﺍﻫﻴﻢ ﮐﺪﻫﺎﻳﯽ ﺭﺍ ﺑﻨﻮﻳﺴﻴﻢ ﮐﻪ ﻳﮏ ﭘﻴﻐﺎﻡ ﺭﺍ ﺩﺭ ﻓﺎﺻﻠﻪ ﺯﻣﺎﻧﯽ ﺳﻪ ﺛﺎﻧﻴﻪ ﺑﺮﺍﯼ ﺑﺎﺯﺩﻳﺪ ﮐﻨﻨﺪﻩ ﻧﺸﺎﻥ ﺩﻫﺪ. ﻳﻌﻨﯽ ﻫﺮ ﺳﻪ ﺛﺎﻧﻴﻪ ﺍﻳﻦ ﭘﻴﻐﺎﻡ ﻇﺎﻫﺮ ﺷﻮﺩ (ﺳﻪ ﺛﺎﻧﻴﻪ ﺳﻪ ﻫﺰﺍﺭ ﻣﻴﻠﯽ ﺛﺎﻧﻴﻪ ﺍﺳﺖ). ﺑﻪ ﮐﺪﻫﺎﯼ ﺁﻥ ﺗﻮﺟﻪ ﮐﻨﻴﺪ:

<!DOCTYPE html>

<html> <body>

<p> ﺑﻌﺪ ﺍﺯ ﻓﺸﺎﺭ ﺩﺍﺩﻥ ﺩﮐﻤﻪ ﻫﺮ ﺳﻪ ﺛﺎﻧﻴﻪ ﭘﻴﻐﺎﻡ ﻇﺎﻫﺮ ﻣﯽ ﺷﻮﺩ </p>

<button onclick=”myFunction()”> ﺩﮐﻤﻪ ﺭﺍ ﺑﺰﻧﻴﺪ </button>

<script>

function myFunction() {

setInterval(function(){alert(” ﺩﺭﻭﺩ “)},۳۰۰۰); }

</script> </body> </html>

ﺍﻳﻦ ﻧﻤﻮﻧﻪ ﮐﺪ‌ﻫﺎ ﺑﺮﺍﯼ ﻧﺸﺎﻥ ﺩﺍﺩﻥ ﭼﮕﻮﻧﮕﯽ ﮐﺎﺭﮐﺮﺩ ﺗﺎﺑﻊ setInterval ﺍﺳﺖ ﻭ ﺩﻭﺭ ﺍﺯ ﺫﻫﻦ ﺍﺳﺖ ﮐﻪ ﺑﺨﻮﺍﻫﻴﻢ ﺑﺮﺍﯼ ﻫﺮ ﺳﻪ ﺛﺎﻧﻴﻪ ﻳﮏ ﭘﻴﻐﺎﻡ ﺭﺍ ﺑﻪ ﺑﺎﺯﺩﻳﺪ ﮐﻨﻨﺪﻩ ﻧﻤﺎﻳﺶ ﺩﻫﻴﻢ. ﻳﮏ ﻧﻤﻮﻧﻪ ﺧﻮﺏ ﺑﺮﺍﯼ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺍﻳﻦ ﻗﺎﺑﻠﻴﺖ ﻧﺸﺎﻥ ﺩﺍﺩﻥ ﺳﺎﻋﺖ ﺍﺳﺖ:

<!DOCTYPE html> <html> <body>

<p id=”demo”></p>

<script>

var myVar=setInterval(function(){myTimer()},1000);

function myTimer() {

var d=new Date() ;

var t=d.toLocaleTimeString() ;

document.getElementById(“demo”).innerHTML=t ; }

</script> </body> </html>

ﺩﺭ ﺍﻳﻦ ﻧﻤﻮﻧﻪ ﻣﺘﺪ setInterval ﺑﺮﺍﯼ ﻫﺮ ﻳﮏ ﺛﺎﻧﻴﻪ ﺗﺎﺑﻊ ﺭﺍ ﻓﺮﺍﺧﻮﺍﻥ ﻣﯽ‌ﮐﻨﺪ ﻭ ﻫﺮ ﻳﮏ ﺛﺎﻧﻴﻪ ﺯﻣﺎﻥ ﺣﺎﻝ ﻧﺸﺎﻥ ﺩﺍﺩﻩ ﻣﯽ‌ﺷﻮﺩ. ﺑﻪ ﺍﻳﻦ ﺗﺮﺗﻴﺐ ﺯﻣﺎﻥ ﺩﺭ ﻫﺮ ﻳﮏ ﺛﺎﻧﻴﻪ ﺑﺮﻭﺯ ﺭﺳﺎﻧﯽ ﺷﺪﻩ ﻭ ﺳﺎﻋﺖ ﻫﻤﺎﻧﻨﺪ ﻳﮏ ﺳﺎﻋﺖ ﻭﺍﻗﻌﯽ ﮐﺎﺭ ﻣﯽ‌ﮐﻨﺪ.

ﺗﻮﻗﻒ ﺗﮑﺮﺍﺭ ﺩﺭ ﻣﺘﺪ setInterval
ﮔﻔﺘﻴﻢ ﮐﻪ ﻣﺘﺪ setInterval ﺑﺮﺍﯼ ﻫﻤﻴﺸﻪ ﺍﺟﺮﺍ ﻭ ﺗﻮﻗﻒ ﮐﺪ‌ﻫﺎ ﺭﺍ ﺗﮑﺮﺍﺭ ﻣﯽ‌ﮐﻨﺪ ﺍﻣﺎ ﭼﻪ ﺍﺗﻔﺎﻗﯽ ﻣﯽ‌ﺍﻓﺘﺪ ﺍﮔﺮ ﻣﺎ ﻧﺨﻮﺍﻫﻴﻢ ﺍﻳﻦ ﺗﮑﺮﺍﺭ ﺍﺗﻔﺎﻕ ﺑﻴﺎﻓﺘﺪ. ﺑﺮﺍﯼ ﻣﺘﻮﻗﻒ ﮐﺮﺩﻥ ﺗﮑﺮﺍﺭ ﻣﺘﺪ ﺑﺎﻳﺪ ﺍﺯ ﻣﺘﺪ ﺩﻳﮕﺮﯼ ﺑﺎ ﻧﺎﻡ clearInterval ﺑﻬﺮﻩ ﺑﺒﺮﻳﻢ. ﺷﻴﻮﻩ ﻧﻮﺷﺘﻦ ﺍﻳﻦ ﻣﺘﺪ ﺑﻪ ﺷﮑﻞ ﺯﻳﺮ ﺍﺳﺖ:

window.clearInterval(ﻣﺘﻐﻴﺮ ﺣﺎﻭﯼ ﺗﻮﻗﻒ)

ﻧﮑﺘﻪ: ﻣﺎﻧﻨﺪ ﻣﺘﺪ setInterval ﺩﺭ ﺍﻳﻦ ﻣﺘﺪ ﻫﻢ ﻧﻴﺎﺯﯼ ﺑﻪ ﻧﻮﺷﺘﻦ window ﻧﻴﺴﺖ ﺍﻣﺎ ﺑﺨﺎﻃﺮ ﻳﺎﺩ ﺁﻭﺭﯼ ﺍﻳﻨﮑﻪ ﺍﻳﻦ ﻣﺘﺪ ﻫﻢ ﺑﻪ ﺁﺑﺠﮑﺖ ﭘﻨﺠﺮﻩ ﺍﺧﺘﺼﺎﺹ ﺩﺍﺭﺩ ﺁﻥ ﺭﺍ ﻧﻮﺷﺘﻪ‌ﺍﻳﻢ.

ﻧﮑﺘﻪ: ﺑﺮﺍﯼ ﺍﻳﻨﮑﻪ ﺑﺘﻮﺍﻧﻴﻢ ﺍﺯ ﺍﻳﻦ ﻣﺘﺪ ﺍﺳﺘﻔﺎﺩﻩ ﮐﻨﻴﻢ ﺑﺎﻳﺪ ﻳﮏ ﻣﺘﻐﻴﺮ ﺟﻬﺎﻧﯽ ﺳﺎﺧﺘﻪ ﻭ ﺧﺮﻭﺟﯽ ﻣﺘﺪ setInterval ﺭﺍ ﺩﺭ ﺁﻥ ﺑﺮﻳﺰﻳﻢ ﻭ ﺳﭙﺲ ﺩﺭ ﺯﻣﺎﻥ ﺑﮑﺎﺭﮔﻴﺮﯼ ﻣﺘﺪ clearInterval ﺍﺯ ﺁﻥ ﻣﺘﻐﻴﺮ ﺑﺼﻮﺭﺕ ﭘﺎﺭﺍﻣﺘﺮ ﻣﺘﺪ ﺍﺳﺘﻔﺎﺩﻩ ﮐﻨﻴﻢ.

ﻧﮑﺘﻪ: ﺩﺭ ﻫﺮ ﺯﻣﺎﻥ ﻳﺎ ﻣﮑﺎﻥ ﮐﺪﻧﻮﻳﺴﯽ ﺧﻮﺩ ﮐﻪ ﺧﻮﺍﺳﺘﻴﻢ ﺍﺯ ﺗﮑﺮﺍﺭ ﻣﺘﺪ setInterval ﺟﻠﻮﮔﻴﺮﯼ ﮐﻨﻴﻢ ﻣﺘﺪ clearInterval ﺭﺍ ﻓﺮﺍﺧﻮﺍﻥ ﻣﯽ‌ﮐﻨﻴﻢ.

ﺍﺟﺎﺯﻩ ﺑﺪﻫﻴﺪ ﺑﺎ ﮔﺬﺍﺷﺘﻦ ﻣﺘﻮﻗﻒ ﮐﻨﻨﺪﻩ ﺩﺭ ﻧﻤﻮﻧﻪ ﭘﻴﺸﻴﻦ ﺍﻳﻦ ﺟﺴﺘﺎﺭ (ﻣﺒﺤﺚ) ﺭﺍ ﮐﺎﻣﻞ ﮐﻨﻴﻢ:

<!DOCTYPE html>

<html> <body>

<p id=”demo”></p>

<button onclick=”myStopFunction()”> ﺯﻣﺎﻥ ﺭﺍ ﻣﺘﻮﻗﻒ ﮐﻦ </button>

<script>

var myVar=setInterval(function(){myTimer()},1000);

function myTimer() {

var d=new Date();

var t=d.toLocaleTimeString();

document.getElementById(“demo”).innerHTML=t;

}

function myStopFunction() {

clearInterval(myVar);

}

</script> </body> </html>

ﺩﺭ ﻧﻤﻮﻧﻪ ﺑﺎﻻ ﺑﻪ ﻣﺤﺾ ﻓﺸﺮﺩﻥ ﺩﮐﻤﻪ «ﺯﻣﺎﻥ ﺭﺍ ﻣﺘﻮﻗﻒ ﮐﻦ» ﺍﺟﺮﺍﯼ ﻣﺘﺪ ﻣﺘﻮﻗﻒ ﺷﺪﻩ ﻭ ﺯﻣﺎﻥ ﻣﯽ‌ﺍﻳﺴﺘﺪ. ﺍﻳﻦ ﻋﻤﻞ ﺑﺎ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﻧﺎﻡ ﻣﺘﻐﻴﺮ ﺟﻬﺎﻧﯽ (myVar) ﮐﻪ ﺣﺎﻣﻞ ﺧﺮﻭﺟﯽ ﻣﺘﺪ setInterval ﺍﺳﺖ ﺍﻧﺠﺎﻡ ﻣﯽ‌ﺷﻮﺩ.

var myVar = setInterval (function(){myTimer()}, 1000 ) ;

ﻫﻤﺎﻧﻄﻮﺭ ﮐﻪ ﻣﯽ‌ﺑﻴﻨﻴﺪ ﺗﺎﺑﻊ myStopFunction ﺑﺎ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﻣﺘﺪ clearInterval ﻭ ﻣﺘﻐﻴﺮ myVar ﺑﻪ ﻋﻨﻮﺍﻥ ﭘﺎﺭﺍﻣﺘﺮ ﻣﺘﺪ، ﻋﻤﻞ ﻣﺘﻮﻗﻒ ﮐﺮﺩﻥ ﻣﺘﺪ setInterval ﺭﺍ ﺍﻧﺠﺎﻡ ﻣﯽ‌ﺩﻫﺪ.

ﻣﺘﺪ setTimeout
ﭘﻴﺶ ﺍﺯ ﺍﻳﻦ ﮔﻔﺘﻪ ﺷﺪ ﮐﻪ ﻣﺘﺪ setTimeout ﺑﺮﺍﯼ ﺍﺟﺮﺍﯼ ﻳﮏ ﺗﺎﺑﻊ، ﻳﮏ ﺑﺎﺭ ﭘﺲ ﺍﺯ ﺍﻧﺘﻈﺎﺭ ﺗﻌﺪﺍﺩ ﻣﺸﺨﺼﯽ ﺍﺯ ﻣﻴﻠﯽ ﺛﺎﻧﻴﻪ ﺍﺳﺘﻔﺎﺩﻩ ﻣﯽ‌ﺷﻮﺩ. ﺷﻴﻮﻩ ﻧﻮﺷﺘﻦ ﺍﻳﻦ ﺗﺎﺑﻊ ﺑﻪ ﺷﮑﻞ ﺯﻳﺮ ﺍﺳﺖ:

window.setTimeout(“ﺗﺎﺑﻊ ﺟﺎﻭﺍ ﺍﺳﮑﺮﻳﭙﺖ”,ﺯﻣﺎﻥ ﺑﻪ ﻣﻴﻠﯽ ﺛﺎﻧﻴﻪ);

ﻧﮑﺘﻪ: ﺍﺯ ﺁﻧﺠﺎ ﮐﻪ ﺍﻳﻦ ﺗﺎﺑﻊ ﻫﻢ ﻣﺘﻌﻠﻖ ﺑﻪ ﺁﺑﺠﮑﺖ ﭘﻨﺠﺮﻩ ﺍﺳﺖ ﺩﺭ ﺷﻴﻮﻩ ﻧﮕﺎﺭﺵ ﻣﺘﺪ ﻧﻴﺎﺯﯼ ﺑﻪ ﻧﻮﺷﺘﻦ ﮐﻠﻤﻪ window ﻧﻴﺴﺖ.

ﻧﻤﻮﻧﻪ ﮐﺪﻫﺎﯼ ﺯﻳﺮ ﻧﺸﺎﻥ ﺩﻫﻨﺪﻩ ﭼﮕﻮﻧﮕﯽ ﻋﻤﻞ ﺍﻳﻦ ﻣﺘﺪ ﻫﺴﺘﻨﺪ.

<!DOCTYPE html>

<html> <body>

<p> ﺳﻪ ﺛﺎﻧﻴﻪ ﺑﻌﺪ ﺍﺯ ﺯﺩﻥ ﺩﮐﻤﻪ ﺯﻳﺮ ﻋﺒﺎﺭﺕ ﺩﺭﻭﺩ ﻧﺸﺎﻥ ﺩﺍﺩﻩ ﻣﯽ ﺷﻮﺩ </p>

<button onclick=”myFunction()”> ﺍﻣﺘﺤﺎﻥ ﮐﻦ </button>

<script>

function myFunction() {

setTimeout(function(){alert(“ﺩﺭﻭﺩ”)},۳۰۰۰);

}

</script> </body> </html>

ﻫﻤﺎﻧﻄﻮﺭ ﮐﻪ ﻣﯽ‌ﺑﻴﻨﻴﺪ ﻣﺘﺪ setTimeout ﻫﻢ ﺩﺍﺭﺍﯼ ﺩﻭ ﭘﺎﺭﺍﻣﺘﺮ ﺍﺳﺖ، ﻳﮑﻢ ﺗﺎﺑﻊ ﺑﺮﺍﯼ ﺍﺟﺮﺍ ﻭ ﺩﻭﻡ ﻣﻴﺰﺍﻥ ﺯﻣﺎﻥ ﺍﺑﺘﺪﺍﻳﯽ ﺑﺮﺍﯼ ﺍﻳﺠﺎﺩ ﻓﺎﺻﻠﻪ ﺑﺮﺍﯼ ﺍﺟﺮﺍﯼ ﺗﺎﺑﻊ. ﺩﮐﻤﻪ‌ﺍﯼ ﺑﺎ ﻧﺎﻡ «ﺍﻣﺘﺤﺎﻥ ﮐﻦ» ﺩﺭ ﺯﻣﺎﻥ ﻓﺸﺎﺭ ﺩﺍﺩﻩ ﺷﺪﻥ ﺗﺎﺑﻊ myFunction ﺭﺍ ﻓﺮﺍﺧﻮﺍﻥ ﻣﯽ‌ﮐﻨﺪ ﻭ ﺗﺎﺑﻊ myFunction ﻣﺘﺪ setTimeout ﻫﻤﺮﺍﻩ ﭘﺎﺭﺍﻣﺘﺮ‌ﻫﺎﻳﺶ ﺭﺍ ﺍﺟﺮﺍ ﻣﯽ‌ﮐﻨﺪ.

ﺗﻮﻗﻒ ﺍﺟﺮﺍﯼ ﻣﺘﺪ setTimeout ﭘﻴﺶ ﺍﺯ ﺍﺟﺮﺍﯼ ﺗﺎﺑﻊ
ﻋﻼﺭﻗﻢ ﺍﺟﺮﺍﯼ ﻣﺘﺪ setTimeout ﻓﻘﻂ ﺑﺮﺍﯼ ﻳﮑﺒﺎﺭ ﺑﺎﺯ ﻣﻤﮑﻦ ﺍﺳﺖ ﮐﻪ ﻣﺎ ﺑﺨﻮﺍﻫﻴﻢ ﺍﺟﺮﺍﯼ ﺁﻥ ﺭﺍ ﻣﺘﻮﻗﻒ ﮐﻨﻴﻢ. ﺭﺍﻩ ﻣﺘﻮﻗﻒ ﮐﺮﺩﻥ ﺍﻳﻦ ﻣﺘﺪ ﺑﮑﺎﺭﮔﻴﺮﯼ ﻣﺘﺪ ﺩﻳﮕﺮﯼ ﺑﺎ ﻧﺎﻡ clearTimeout ﺍﺳﺖ. ﺍﻳﻦ ﻣﺘﺪ ﺑﻌﺪ ﺍﺯ ﻓﺮﺍﺧﻮﺍﻧﯽ -ﭼﻨﺎﻧﭽﻪ ﭘﻴﺶ ﺍﺯ ﺯﻣﺎﻥ ﺍﺟﺮﺍﯼ ﺗﺎﺑﻊ ﻓﺮﺍﺧﻮﺍﻥ ﺷﻮﺩ- ﺍﺟﺮﺍ ﺷﺪﻩ ﻭ ﺍﺯ ﺍﻋﻤﺎﻝ ﺗﺎﺑﻊ ﺟﻠﻮﮔﻴﺮﯼ ﻣﯽ‌ﮐﻨﺪ. ﺷﻴﻮﻩ ﻧﮕﺎﺭﺵ ﺍﻳﻦ ﺗﺎﺑﻊ ﺑﻪ ﺷﺮﺡ ﺯﻳﺮ ﻣﯽ‌ﺑﺎﺷﺪ:

window.clearTimeout(ﻣﺘﻐﻴﺮ ﺣﺎﻭﯼ ﺯﻣﺎﻥ)

ﻧﮑﺘﻪ: ﺑﮑﺎﺭﮔﻴﺮﯼ ﮐﻠﻤﻪ window ﺩﺭ ﻧﻮﺷﺘﻦ ﺍﻳﻦ ﻣﺘﺪ ﺍﺟﺒﺎﺭﯼ ﻧﻴﺴﺖ.

ﺑﺮﺍﯼ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺍﻳﻦ ﻣﺘﺪ ﻫﻢ ﺑﺎﻳﺪ ﺍﺑﺘﺪﺍ ﻳﮏ ﻣﺘﻐﻴﺮ ﺟﻬﺎﻧﯽ ﺳﺎﺧﺘﻪ ﻭ ﺍﺯ ﻧﺎﻡ ﺁﻥ ﺑﺮﺍﯼ ﻣﺘﻮﻗﻒ ﮐﺮﺩﻥ ﻣﺘﺪ setTimeout ﺍﺳﺘﻔﺎﺩﻩ ﮐﻨﻴﻢ.

ﻧﮑﺘﻪ: ﻓﺮﺍﻣﻮﺵ ﻧﮑﻨﻴﺪ ﮐﻪ ﺍﻳﻦ ﻣﺘﺪ ﺯﻣﺎﻧﯽ ﮐﺎﺭﺍﻳﯽ ﺩﺍﺭﺩ ﮐﻪ ﭘﻴﺶ ﺍﺯ ﺍﺟﺮﺍﯼ ﺗﺎﺑﻊ ﻗﺮﺍﺧﻮﺍﻥ ﺷﺪﻩ ﺩﺭ ﻣﺘﺪ setTimeout ﻓﺮﺍﺧﻮﺍﻥ ﻭ ﺍﺟﺮﺍ ﺷﻮﺩ.

ﺑﻪ ﻧﻤﻮﻧﻪ ﺯﻳﺮ ﺗﻮﺟﻪ ﮐﻨﻴﺪ:

<!DOCTYPE html>

<html> <body>

<p> ﺩﮐﻤﻪ «ﺷﺮﻭﻉ ﮐﻦ» ﺭﺍ ﺑﺮﺍﯼ ﺍﺟﺮﺍ ﻭ ﺩﮐﻤﻪ «ﻣﺘﻮﻗﻒ ﮐﻦ» ﺭﺍ ﺑﺮﺍﯼ ﺗﻮﻗﻒ ﻣﺘﺪ ﻓﺸﺎﺭ ﺩﻫﻴﺪ </p>

<p>ﺍﺟﺮﺍﯼ ﺗﺎﺑﻊ ﺩﺍﺧﻞ ﻣﺘﺪ « setTimeout» ﺳﻪ ﺛﺎﻧﻴﻪ ﻃﻮﻝ ﻣﯽ ﮐﺸﺪ ﭘﺲ ﺑﺮﺍﯼ ﻣﺘﻮﻗﻒ ﮐﺮﺩﻥ ﺁﻥ ﺳﻪ ﺛﺎﻧﻴﻪ ﺯﻣﺎﻥ ﺩﺍﺭﻳﺪ ﺗﺎ ﺩﮐﻤﻪ «ﻣﺘﻮﻗﻒ ﮐﻦ» ﺭﺍ ﻓﺸﺎﺭ ﺩﻫﻴﺪ </p>

<button onclick=”myFunction()”>ﺷﺮﻭﻉ ﮐﻦ</button>

<button onclick=”myStopFunction()”> ﻣﺘﻮﻗﻒ ﮐﻦ </button>

<script>

var myVar;

function myFunction() {

myVar=setTimeout(function(){alert(“ﺩﺭﻭﺩ”)},۳۰۰۰); }

function myStopFunction() {

clearTimeout(myVar); }

</script> </body> </html>

ﺑﺮﺍﯼ ﻧﻤﻮﻧﻪ ﮐﺪﻫﺎﯼ ﺑﺎﻻ ﺩﻭ ﺩﮐﻤﻪ ﺩﺭ ﻧﻈﺮ ﮔﺮﻓﺘﻪ ﺷﺪﻩ ﺍﺳﺖ، «ﺷﺮﻭﻉ ﮐﻦ» ﻭ «ﻣﺘﻮﻗﻒ» ﮐﻪ ﺍﻭﻟﯽ ﺑﺮﺍﯼ ﺍﺟﺮﺍﯼ ﺗﺎﺑﻊ ﺣﺎﻣﻞ ﻣﺘﺪ «setTimeout» ﺍﺳﺖ ﻭ ﺩﻭﻣﯽ ﺑﺮﺍﯼ ﺍﺟﺮﺍﯼ ﺗﺎﺑﻊ ﺣﺎﻣﻞ «clearTimeout».

ﺍﺯ ﺁﻧﺠﺎ ﮐﻪ ﻣﺎ ﻣﯽ‌ﺩﺍﻧﻴﻢ ﻣﺘﺪ setTimeout ﻓﻘﻂ ﻳﮑﺒﺎﺭ ﻭ ﺁﻥ ﻫﻢ ﺑﻌﺪ ﺍﺯ ﺳﻪ ﺛﺎﻧﻴﻪ (ﺳﻪ ﺛﺎﻧﻴﻪ ﺩﺭ ﭘﺎﺭﺍﻣﺘﺮ ﻣﺘﺪ ﺗﻌﻴﻴﻦ ﺷﺪﻩ ﺍﺳﺖ) ﺍﺟﺮﺍ ﻣﯽ‌ﺷﻮﺩ، ﺑﺮﺍﯼ ﺟﻠﻮﮔﻴﺮﯼ ﺍﺯ ﺍﺟﺮﺍﯼ ﺁﻥ ﺗﻨﻬﺎ ﺳﻪ ﺛﺎﻧﻴﻪ ﺯﻣﺎﻥ ﺩﺍﺭﻳﻢ. ﭼﺮﺍﮐﻪ ﭘﺲ ﺍﺯ ﺳﻪ ﺛﺎﻧﻴﻪ ﺗﺎﺑﻊ ﺍﺟﺮﺍ ﻣﯽ‌ﺷﻮﺩ ﻭ ﺩﻳﮕﺮ ﻗﺎﺩﺭ ﺑﻪ ﺗﻮﻗﻒ ﺁﻥ ﻧﻴﺴﺘﻴﻢ. ﺑﻌﻼﻭﻩ ﺁﻥ ﺍﻳﻦ ﻣﺘﺪ ﺗﻨﻬﺎ ﻳﮑﺒﺎﺭ ﺍﺟﺮﺍ ﻣﯽ‌ﺷﻮﺩ ﭘﺲ ﺑﻌﺪ ﺍﺯ ﺍﺟﺮﺍ ﺩﺭ ﺍﺻﻞ ﻧﻴﺎﺯﯼ ﺑﻪ ﺗﻮﻗﻒ ﻧﺪﺍﺭﻳﻢ.

ﻧﻤﻮﻧﻪ ﺩﻳﮕﺮ ﺑﺮﺍﯼ ﻧﻤﺎﻳﺶ ﺳﺎﻋﺖ:

<!DOCTYPE html>

<html> <head> <script>

function startTime() {

var today = new Date() ;

var h = today.getHours() ;

var m = today.getMinutes() ;

var s = today.getSeconds() ;

m = checkTime(m) ;

s = checkTime(s) ;

document.getElementById(‘txt’).innerHTML= h+” : “+m+” : “+s ;

t = setTimeout(function(){startTime()},500) ; }

function checkTime(i) {

if (i<10) { ﺑﺮﺍﯼ ﺍﺿﺎﻓﻪ ﮐﺮﺩﻥ ﻋﺪﺩ ﺻﻔﺮ ﺩﺭ ﺟﻠﻮﯼ ﺍﻋﺪﺍﺩ ﮐﻮﭼﮑﺘﺮ ﺍﺯ ۱۰ //

i = “0” + i ; }

return i ; }

</script> </head>

<body onload=”startTime()”>

<div id=”txt”></div>

</body> </html>

ﺑﺎ ﺗﻮﺟﻪ ﺑﻪ ﺍﻃﻼﻋﺎﺕ ﺩﺍﺩﻩ ﺷﺪﻩ ﺩﺭ ﺍﻳﻦ ﺩﺭﺱ ﺑﺎﺯ ﺧﻮﺍﻧﯽ ﺍﻳﻦ ﻧﻤﻮﻧﻪ ﺭﺍ ﺑﻪ ﺧﻮﺩ ﺷﻤﺎ ﻭﺍﮔﺬﺍﺭ ﻣﯽ‌ﮐﻨﻴﻢ.

اموزش طراحی سایت

آموزش طراحی سایت

اموزش طراحی وب سایت

آموزش طراحی سایت

درباره آموزشگاه نوین آی تی

همچنین ببینید

نحوه نام گذاری متغییر های جاوا

مطلب جدیدی که در این آموزش قرار است فرا بگیریم نحوه صحیح نامگذاری متغیر ها ...

پاسخ دهید

علی طاهری آموزشگاه طراحی سایت نوین آی تی 021-88283800 info(@)novin-it.net