JS定时器：setTimeout()和setInterval()方法

在 JavaScript 中，window 对象包含 4 个定时器专用方法，说明如下表所示，使用它们可以实现代码定时执行，或者延迟执行，使用定时器可以设计演示动画。

window 对象定时器方法列表

方法	说明
setInterval()	按照执行的周期（单位为毫秒）调用函数或计算表达式
setTimeout()	在指定的毫秒数后调用函数或计算表达式
clearInterval()	取消由 setInterval() 方法生成的定时器
clearTimeout()	取消由 setTimeout() 方法生成的定时器

setTimeout() 方法

setTimeout() 方法能够在指定的时间段后执行特定代码。用法如下：

var o = setTimeout(code, delay);

参数 code 表示要延迟执行的字符串型代码，将在 Windows 环境中执行，如果包含多个语句，应该使用分号进行分隔。delay 表示延迟时间，以毫秒为单位。

该方法返回值是一个 Timer ID，这个 ID 编号指向延迟执行的代码控制句柄。如果把这个句柄传递给 clearTimeout() 方法，则会取消代码的延迟执行。

示例1

下面示例演示了当鼠标指针移过段落文本时，会延迟半秒钟弹出一个提示对话框，显示当前元素的名称。

<p>段落文本</p>
<script>
    var p = document.getElementsByTagName("p") [0];
    p.onmouseover = function (i) {
        setTimeout (function () {
            console.log(p.tagName);
        }, 500);
    }
</script>

setTimeout() 方法的第一个参数虽然是字符串，但是也可以是一个函数。一般建议把函数作为参数传递给 setTimeout() 方法，等待延迟调用。

示例2

下面示例演示了如何为集合中每个元素都绑定一个事件延迟处理函数。

var o = document.getElementsByTagName("body") [0].childNodes;  //获取body下所有子元素
for (var i = 0; i < o.length; i ++){  //遍历元素集合
    o[i].onmouseover = function (i) {  //注册鼠标经过事件处理函数
        return function () {  //返回闭包函数
            f (o[i]);  //调用函数f，并传递当前对象引用
        }
    } (i);  //调用函数并传递循环序号，实现在闭包中存储对象序号值
}
function f (o) {  //延迟处理函数
    var out = setTimeout (function () {
        console.log(o.tagName);  //显示当前元素的名称
    }, 500}  //定义延迟半秒钟后执行代码
}

这样当鼠标指针移过每个页面元素时，都会在延迟半秒钟后弹出一个提示对话框，提示元素名称。

示例3

可以利用 clearTimeout() 方法在特定条件下清除延迟处理代码。例如，当鼠标指针移过某个元素，停留半秒钟之后才会弹出提示信息，一旦鼠标指针移出当前元素，就立即清除前面定义的延迟处理函数，避免干扰。

var o = document.getElementsByTagName("body") [0].childNodes;
for (var i = 0; i < o.length; i ++ ) {
    o[i].onmouseover = function (i) {  //为每个元素注册鼠标移过时事件延迟处理函数
        return function () {
            f (o[i]);
        }
    } (i);
    o[i].onmouseover = function (i) {  //为每个元素注册鼠标移出时清除延迟处理函数
        return function () {
            clearTimeout (o[i].out);  //清除已注册的延迟处理函数
        }
    } (i);
}
function f (o) {  //把延迟处理定时器存储在每个元素的 out 属性中
    o.out = setTimeout (function () {
        nsole.log(o.tagName);
    }, 500);
}

如果希望反复执行 setTimeout() 方法中包含的代码，可以在 setTimeout() 方法中包含对自身的调用，这样就可以把自身注册为可以被反复执行的方法。

示例4

下面示例会在页面内的文本框中按秒针速度显示递加的数字，当循环执行 10 次后，会调用 clearTimeout() 方法清除对代码的执行，并弹出提示信息。

<input type="text" />
<script>
    var t = document.getElementsByTagName("input") [0];
    var i = 1;
    function f () {
        var out = setTimeout(  //定义延迟执行的方法
        function () {  //延迟执行函数
            t.value = i ++;  //递加数字
            f ();  //调用包含setTimeout()方法的函数
        }, 1000);  //设置每秒执行一次调用
        if (i > 10) {  //如果超过10次，则清除执行，并弹出提示信息
            clearTimeout (out);
            console.log("10秒钟已到");
        }
    }
    f();  //调用函数
</script>

setInterval() 方法

setInterval() 方法能够周期性执行指定的代码，如果不加以处理，那么该方法将会被持续执行，直到浏览器窗口关闭或者跳转到其他页面为止。用法如下：

var o = setInterval (code, interval)

该方法的用法与 setTimeout() 方法基本相同，其中参数 code 表示要周期执行的代码字符串，参数 interval 表示周期执行的时间间隔，以毫秒为单位。

该方法返回值是一个 Timer ID，这个 ID 编号指向对当前周期函数的执行引用，利用该值对计时器进行访问，如果把这个值传递给 clearTimeout() 方法，则会强制取消周期性执行的代码。

如果 setInterval() 方法的第 1 个参数是一个函数，则 setInterval() 方法可以接收任意多个参数，这些参数将作为该函数的参数使用。格式如下：

var o = setInterval(functioin, interval[,arg1, arg2, ... argn])

示例5

针对示例 4 可以按以下方法进行设计。

<input type="text" />
<script>
    var t = document.getElementByTagName("input") [0];
    var i = 1;
    var out = setInterval (f, 1000);  //定义周期性执行的函数
    function f () {
        t.value = i ++;
        if (i > 10) {  //如果重复执行10次
            clearTimeout (out);  //则清除周期性调用函数
            console.log("10秒钟已到");
        }
    }
</script>

setTimeout() 方法主要用来延迟代码执行，而 setInterval() 方法主要实现周期性执行代码。它们都可以设计周期性动作，其中 setTimeout() 方法适合不定时执行某个动作，而 setInterval() 方法适合定时执行某个动作。

setTimeout() 方法不会每隔固定时间就执行一次动作，它受 JavaScript 任务队列的影响，只有前面没有任务时，才会按时延迟执行动作。而 setInterval() 方法不受任务队列的限制，它只是简单的每隔一定的时间就重复执行一次动作，如果前面任务还没有执行完毕，setInterval()  可能会插队按时执行动作。