計時器 · JavaScript學習

# 計時器 [TOC] ## 計時事件　　通過使用JavaScript我們可以做到再一個設定的時間間隔之后執行代碼,而不是在函數調用之后立即執行，我們稱之為計時事件。 ## 計時方法 * `setInterval()` 間隔制定的毫秒數不停的執行指定的代碼 * `clearInterval()` 用于停止`setInterval()`方法執行的函數代碼 * `setTimeout()` 暫停指定的毫秒數后指定指定的代碼 * `clearTimeout()` 方法用于停止執行`setTimeout()`方法的函數代碼 ### 示例1 ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>時鐘效果</title> </head> <body> <button id="btn">時間靜止</button> <p id="ptime"></p> <script> var mytime = setInterval(getTime,1000); function getTime(){ var dObj = new Date(); var tString = dObj.toLocaleTimeString(); document.getElementById('ptime').innerHTML = tString; } var btn = document.getElementById('btn'); btn.addEventListener('click',function(){ window.clearInterval(mytime); }); // 點擊按鈕清除定時器執行 </script> </body> </html> ~~~ ### 示例2 ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>時鐘效果</title> </head> <body> <button id="btnstart">開始計時</button> <button id="stopbtn">停止計時</button> <script> var win; var i = 1; var btnstart = document.getElementById('btnstart'); var stopbtn = document.getElementById('stopbtn'); // 延時執行函數 function myWin(){ // win = setTimeout(function(){alert(i)},3000); // 只調用一次 win = setTimeout(function(){myWin();},3000); // 每隔三秒不斷的調用自己 console.log(i++); } btnstart.addEventListener('click',myWin); //點擊開始按鈕執行定制器 stopbtn.addEventListener('click',function(){clearTimeout(win)}); // 點擊停止按鈕執行清除定時器的操作 </script> </body> </html> ~~~