JavaScript定时器setTimeout()和setInterval()详解

在前端开发中，经常会用到定时器来控制代码的执行时间。而JavaScript中提供了两个定时器函数setTimeout()和setInterval()，本文详细讲解它们的用法及区别。

setTimeout()

setTimeout()函数可以让指定的代码在指定的时间后执行一次。它的语法如下：

setTimeout(function, milliseconds);

其中，function是要执行的代码，毫秒数(milliseconds)是指定的时间。如下面的例子，代码将在1000毫秒(1秒)后执行：

setTimeout(function(){
    console.log('Hello setTimeout!'); 
}, 1000);

需要注意的是，setTimeout()函数只会执行一次。如果需要多次执行，可以结合递归调用实现。

setInterval()

setInterval()函数可以让指定的代码每隔一定时间执行一次。它的语法如下：

setInterval(function, milliseconds);

其中，function是要执行的代码，毫秒数(milliseconds)是指定的时间。如下面的例子，代码将每隔1000毫秒(1秒)执行一次：

setInterval(function(){
    console.log('Hello setInterval!'); 
}, 1000);

需要注意的是，setInterval()函数会持续执行，直到调用clearInterval()函数停止为止。如下面的例子，代码将在5秒后停止执行：

var intervalId = setInterval(function(){
    console.log('Hello setInterval!'); 
}, 1000);

setTimeout(function(){
    clearInterval(intervalId);
}, 5000);

在上面的代码中，setInterval()函数每隔1秒执行一次，而使用setTimeout()函数调用clearInterval()函数可以让它在5秒后停止执行。

小结

setTimeout()和setInterval()函数是JavaScript中常用的定时器函数。setTimeout()函数让代码在一定时间后执行一次，而setInterval()函数让代码每隔一定时间执行一次。需要注意的是，setInterval()函数需要使用clearInterval()函数停止执行，否则它将会一直执行下去。

示例说明

示例1

以下代码演示如何使用setTimeout函数实现3秒后输出"Hello setTimeout!"并且输出“Hello setTimeout!”的递归调用，不停输出。

setTimeout(function(){
    console.log('Hello setTimeout!'); 
    setTimeout(arguments.callee,3000);
},3000);

示例2

以下代码演示如何使用setInterval函数实现每隔1秒输出“Hello setInterval!”并且在5秒后停止输出。

var intervalId = setInterval(function(){
    console.log('Hello setInterval!'); 
}, 1000);

setTimeout(function(){
    clearInterval(intervalId);
}, 5000);