JavaScript setTimeout()和setInterval()计时器函数的用法（附带实例）

JavaScript 代码中，如果需要定时执行重复的代码，可以使用计时器函数，其中：

setTimeout() 函数，参数一指定调用的函数；参数二指定多长时间后执行，单位为毫秒。函数只会执行一次任务，如果需要一定时间后再次执行，需要再次调用 setTimeout() 函数。
setInterval() 函数，严格按一定的时间重复执行函数内容。参数一指定调用的函数；参数二指定执行的间隔时间，单位同样为毫秒。

这两个函数都会返回一个任务标识代码，代码可以作为 clearTimeout() 或 clearInterval() 函数的参数来终止任务。

首先来看 setTimeout() 函数的应用，如下面的代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="msg"></div>
</body>
</html>
<script>
    // 显示当前时间
    function showTime() {
        var eMsg = document.getElementById("msg");
        var d = new Date();
        eMsg.innerText = d.toLocaleTimeString();
        // 循环调用
        setTimeout(showTime, 1000);
    }
    // 开始执行
    showTime();
</script>

本例中页面会自动更新时间，代码执行结果为：

下午10:34:08

代码中定义了 showTime() 函数，其功能是在 id 为 msg 的元素中显示系统的当前时间。

其中 document.getElementById() 方法会根据元素 ID 属性值返回元素对象。然后，通过元素的innerText属性设置元素中显示的文本内容。最后一行代码调用了 setTimeout() 函数，参数一指定执行的函数名，这里是 showTime() 函数；参数二指定多少毫秒之后执行。这样一来，每隔 1000ms（1s）就会执行一次 showTime() 函数，以显示最新的时间。

下面的代码使用 setInterval() 函数实现相同的功能：

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="msg"></div>
</body>
</html>
<script>
    // 显示当前时间
    function showTime() {
        var eMsg = document.getElementById("msg");
        var d = new Date();
        eMsg.innerText = d.toLocaleTimeString();
    }
    // 开始执行
    setInterval(showTime, 1000);
</script>

从这两个示例中可以看到，setTimeout() 和 setInterval() 函数的区别在于：

setTimeout() 函数会等待一定的时间后执行一次指定的函数，如果需要重复执行，就需要循环调用 setTimeout() 函数；
setInterval() 函数则每隔一定的时间就执行一次指定的函数，所以，它只调用一次就可以实现循环工作。

停止 setTimeout() 函数工作时，需要使用 clearTimeout() 函数，其参数是对应的 setTimout() 函数的返回值。停止 setInterval() 函数工作时，需要使用 clearInterval() 函数，其参数是对应的 setInterval() 函数的返回值。

下面的代码通过 setInterval() 和 clearInterval() 函数演示一个 10s 倒计时的功能：

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="msg">10</div>
</body>
</html>
<script>
    var seconds = 10;
    var handle;
    var eMsg = document.getElementById("msg");
    // 计时函数
    function timer() {
        seconds--;
        if (seconds < 1) {
            clearInterval(handle);
            eMsg.innerText = "时间到";
        } else {
            eMsg.innerText = seconds.toString();
        }
    }
    // 开始计时
    handle = setInterval(timer, 1000);
</script>

代码中，首先定义了三个变量，其中，seconds 变量为倒计时的秒数；handle 变量保存 setInterval() 函数返回的句柄，它是一个数值型数据；eMsg 表示显示信息的元素对象。

每次调用 timer() 函数时，seconds 变量的值都会减 1，当其值小于 1 时，使用 clearInterval() 函数停止任务，并显示“时间到”。代码的最后，调用 setInterval() 函数启动计时器，并将函数的返回值赋给 handle 变量。计时完成时，clearInterval() 函数会通过 handle 终止任务。

打开此页面，会从 10 倒计时到 1，然后停止执行，并显示“时间到”。

实际应用中，如果循环任务的工作量比较大，可以考虑使用 setTimeout() 函数，因为它可以在每次任务完成后再启动下一次任务，而 setInterval() 函数会在一定的时间后准时启动下一次任务，但是，如果上一次的任务还没有完成，就可以造成一些冲突，例如某些数据的计算还没有完成，却又要开始新一轮的计算任务。

当然，如果任务需要每隔一定的时间就准时执行的情况下，setInterval() 函数又是比较合适的选择，开发中可以根据实际需要选择使用。

JavaScript setTimeout()和setInterval()计时器函数的用法（附带实例）

相关文章