JavaScript定時器

簡介

JavaScript 中有兩種定時器：一種是超時定時器，用來在指定時間以後執行一段代碼，這種定時器用 setTimeout() 開啓，用 clearTimeout() 結束；另外一種是循環定時器，用來在指定週期循環執行一段代碼，這種定時器用 setInterval() 開啓，用 clearInterval() 結束。

示例

超時定時器

<script> var timeoutCount = 0; function onTimeout() { timeoutCount++; $("#timeoutCount").text("Count: " + timeoutCount); } var timeoutTimerId; function onStartTimeoutTimer() { timeoutTimerId = setTimeout("onTimeout()", 1000); } function onStopTimeoutTimer() { clearTimeout(timeoutTimerId); } </script>
<button type="button" class="btn btn-sm btn-primary" onclick="onStartTimeoutTimer();">開始</button>
<button type="button" class="btn btn-sm btn-danger ml-2" onclick="onStopTimeoutTimer();">中止</button>
<span id="timeoutCount" class="ml-2">Count: 0</span>

查看運行結果

循環定時器

<script> var intervalCount = 0; function onInterval() { intervalCount++; $("#intervalCount").text("Count: " + intervalCount); } var intervalTimerId; function onStartIntervalTimer() { intervalTimerId = setInterval("onInterval()", 1000); } function onStopIntervalTimer() { clearInterval(intervalTimerId); } </script>
<button type="button" class="btn btn-sm btn-primary" onclick="onStartIntervalTimer();">開始</button>
<button type="button" class="btn btn-sm btn-danger ml-2" onclick="onStopIntervalTimer();">中止</button>
<span id="intervalCount" class="ml-2">Count: 0</span>

查看運行結果