1. 程式人生 > >JavaScript BOM重要方法——計時事件

JavaScript BOM重要方法——計時事件

JavaScript計時事件

通過使用 JavaScript,我們有能力作到在一個設定的時間間隔之後來執行程式碼,而不是在函式被呼叫後立即執行。我們稱之為計時事件。
在 JavaScritp 中使用計時事件是很容易的,兩個關鍵方法是:

  1. setInterval() - 間隔指定的毫秒數不停地執行指定的程式碼。
    clearInterval()方法用於停止 setInterval() 方法執行的函式程式碼。
  2. setTimeout() - 暫停指定的毫秒數後執行指定的程式碼
    clearTimeout() 方法用於停止執行setTimeout()方法的函式程式碼。

Note: setInterval() 和 setTimeout() 是 HTML DOM Window物件的兩個方法。

setInterval()方法以及clearInterval()方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>測試setInterval方法</title>
    </head>
    <body>
        <p>頁面上顯示時鐘:</p>
        <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; } function myStopFunction(){ clearInterval(myVar); }
</script> <hr> <button onclick="myStopFunction()">停止時鐘</button> </body> </html>

效果:
這裡寫圖片描述

setTimeout()以及clearTimeout()方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>測試clearTimeout方法</title>
    </head>
    <body>
        <p>點選第一個按鈕等待2秒後出現"Hello"彈框。</p>
        <p>點選第二個按鈕來阻止第一個函式執行。(你必須在2秒之前點選它)。</p>
        <button onclick="myFunction()">點我</button>
        <button onclick="myStopFunction()">停止彈框</button>
        <script>
            var myVar;
            function myFunction(){
                myVar=setTimeout(function(){alert("Hello")},3000);
            }
            function myStopFunction(){
                clearTimeout(myVar);
            }
        </script>
    </body>
</html>

效果:
這裡寫圖片描述