JavaScript計時事件

JavaScript計時事件
JavaScript一個設定的事件間隔之後，執行代碼，我們稱之爲計時事件

通過使用JavaScript，我們可以做到在一個設定的時間間隔之後再執行代碼，而不是函數被調用後立即執行我們稱之爲計時事件

在JavaScript中使用計時事件是很容易的，兩個關鍵方法是：

·setInterval() - 間隔指定的毫秒數不停地執行指定的代碼。
·setTimeout() - 暫停指定的毫秒數後執行指定的代碼
Note：setInterval()和setTimeout()是HTML DOM Window對象的兩個方法

下面分別講一個兩個方法
1、setInterval()方法
   setInterval()間隔制定的毫秒數不停的執行指定的代碼
   語法：window.setInterval(“javascript function”,milliseconds);
	
   window.setInterval()方法可以不使用window前綴，直接使用函數setInterval().
   setInterval()第一個參數是函數(function)。
   第二個參數是間隔的毫秒數
   注意：1000毫秒是一秒

   實例：每三秒彈出”hello”
	 <p>單擊按鈕每3秒出現一個“Hello”警告框。</p>
	 <p>再次點擊警告框，經過3秒出現新的警告框，這將一直執行 ...</p>
	 <button onclick="myFunction()">點我</button>
	 <script>

function myFunction(){
setInterval(function(){alert(“Hello”)},3000);
}

這樣的話對用戶體驗不好，下面再來一個實例，將顯示當前時間，用setInterval()方法設置每秒鐘執行一次代碼，就是手錶一樣。

在頁面顯示一個時鐘

如果停止運行？
clearInterval()方法用於停止setInterval()方法執行的函數代碼。
語法：window.clearInterval(intervalVariable)

Window.clearInterval()方法可以不使用window前綴，直接使用函數clearInterval().
要使用clearIterval()方法。在創建計時方法時你必須使用全局變量：
myVar=setInterval(“javascript function”,milliseconds)；

然後你可以使用clearInterval()方法來停止執行。
<p>頁面上顯示時鐘：</p>
<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>

2、setTimeout()方法
語法：window.setTimerout(“javascript 函數”,毫秒數);

setTimeout()方法會返回某個值，在上面的語句中，值被儲存在名爲t的變量中，假如你希望取消這個setTimeout()，你可以使用這個變量名來指定它。
setTimeout()的第一個參數是函數是含有JavaScript語句的字符串，這個語句可能植入”alert(5 seconds!)”,或者對函數的調用，諸如alertMsg()。
第二個參數從當前期多少毫秒後執行第一個參數。
還是上面的實例
<p>點擊按鈕，在等待 3 秒後彈出 "Hello"。</p>
<button onclick="myFunction()">點我</button>
<script>
    function myFunction() {
        setTimeout(function () { alert("Hello") }, 3000); 
    }

停止方法

點擊第一個按鈕等待3秒後出現"Hello"彈框。

點擊第二個按鈕來阻止第一個函數運行。（你必須在3秒之前點擊它）。

點我 停止彈框