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>

查看运行结果