JavaScript Timing ʼþ

JavaScript ¿ÉÒÔÔÚʱ¼ä¼ä¸ôÄÚÖ´ÐС£

Õâ¾ÍÊÇËùνµÄ¶¨Ê±Ê¼þ£¨ Timing Events£©¡£

Timing ʼþ

window ¶ÔÏóÔÊÐíÒÔÖ¸¶¨µÄʱ¼ä¼ä¸ôÖ´ÐдúÂë¡£

ÕâЩʱ¼ä¼ä¸ô³ÆÎª¶¨Ê±Ê¼þ¡£

ͨ¹ý JavaScript ʹÓõÄÓÐÁ½¸ö¹Ø¼üµÄ·½·¨£º

setTimeout(function, milliseconds)
ÔڵȴýÖ¸¶¨µÄºÁÃëÊýºóÖ´Ðк¯Êý¡£
setInterval(function, milliseconds)
µÈͬÓÚ setTimeout()£¬µ«³ÖÐøÖØ¸´Ö´Ðиú¯Êý¡£

setTimeout() ºÍ setInterval() ¶¼ÊôÓÚ HTML DOM Window ¶ÔÏóµÄ·½·¨¡£

setTimeout() ·½·¨

window.setTimeout(function, milliseconds);

window.setTimeout() ·½·¨¿ÉÒÔ²»´ø window ǰ׺À´±àд¡£

µÚÒ»¸ö²ÎÊýÊÇÒªÖ´Ðеĺ¯Êý¡£

µÚ¶þ¸ö²ÎÊýָʾִÐÐ֮ǰµÄºÁÃëÊý¡£

ʵÀý

µ¥»÷°´Å¥¡£µÈ´ý 3 Ã룬ȻºóÒ³Ãæ»áÌáʾ "Hello"£º

<button onclick="setTimeout(myFunction, 3000)">ÊÔÒ»ÊÔ</button>

<script>
function myFunction() {
    alert('Hello');
 }
</script>

Ç××ÔÊÔÒ»ÊÔ

ÈçºÎÍ£Ö¹Ö´ÐУ¿

clearTimeout() ·½·¨Í£Ö¹Ö´ÐÐ setTimeout() Öй涨µÄº¯Êý¡£

window.clearTimeout(timeoutVariable)

window.clearTimeout() ·½·¨¿ÉÒÔ²»´ø window ǰ׺À´Ð´¡£

clearTimeout() ʹÓÃ´Ó setTimeout() ·µ»ØµÄ±äÁ¿£º

myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);

ʵÀý

ÀàËÆÉÏÀý£¬µ«ÊÇÌí¼ÓÁË¡°Í£Ö¹¡±°´Å¥£º

<button onclick="myVar = setTimeout(myFunction, 3000)">ÊÔÒ»ÊÔ</button>

<button onclick="clearTimeout(myVar)">Í£Ö¹Ö´ÐÐ</button>

Ç××ÔÊÔÒ»ÊÔ

setInterval() ·½·¨

setInterval() ·½·¨ÔÚÿ¸ö¸ø¶¨µÄʱ¼ä¼ä¸ôÖØ¸´¸ø¶¨µÄº¯Êý¡£

window.setInterval(function, milliseconds);

window.setInterval() ·½·¨¿ÉÒÔ²»´ø window ǰ׺À´Ð´¡£

µÚÒ»¸ö²ÎÊýÊÇÒªÖ´Ðеĺ¯Êý¡£

µÚ¶þ¸ö²ÎÊýÿ¸öÖ´ÐÐÖ®¼äµÄʱ¼ä¼ä¸ôµÄ³¤¶È¡£

±¾ÀýÿÃëÖ´ÐÐÒ»´Îº¯Êý "myTimer"£¨¾ÍÏñÊý×ÖÊÖ±í£©¡£

ʵÀý

ÏÔʾµ±Ç°Ê±¼ä£º

var myVar = setInterval(myTimer, 1000);
 
function myTimer() {
    var d = new Date();
    document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}

Ç××ÔÊÔÒ»ÊÔ

Ò»ÃëÓÐ 1000 ºÁÃë¡£

ÈçºÎÍ£Ö¹Ö´ÐУ¿

clearInterval() ·½·¨Í£Ö¹ setInterval() ·½·¨ÖÐÖ¸¶¨µÄº¯ÊýµÄÖ´ÐС£

window.clearInterval(timerVariable)

window.clearInterval() ·½·¨¿ÉÒÔ²»´ø window ǰ׺À´Ð´¡£

clearInterval() ·½·¨Ê¹ÓÃ´Ó setInterval() ·µ»ØµÄ±äÁ¿£º

myVar = setInterval(function, milliseconds);
clearInterval(myVar);

ʵÀý

ÀàËÆÉÏÀý£¬µ«ÊÇÎÒÃÇÌí¼ÓÁËÒ»¸ö¡°Í£Ö¹Ê±¼ä¡±°´Å¥£º

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

<button onclick="clearInterval(myVar)">ֹͣʱ¼ä</button>

<script>
var myVar = setInterval(myTimer, 1000);
 function myTimer() {
    var d = new Date();
    document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>

Ç××ÔÊÔÒ»ÊÔ

VUE