JavaScript定时器

来源：互联网发布：拼多多上款软件编辑：程序博客网时间：2024/05/21 08:03

简介

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>

查看运行结果

阅读全文

1 0