JavaScript之使用定时器

window对象包含四个定时器专用方法，使用它们可以实现代码定时运行，从而避免连续运行。这样一来，我们就可以设计动画了。

 setTimeout()方法 — var o=setTimeout(code,delay);

参数code表示延迟执行的代码字符串，delay表示延迟的时间，一毫秒为单位。该方法返回的是一个Timer ID，这个ID编号指向延迟执行的代码控制句柄。如果把这个句柄传递给clearTimeout()方法，则会取消代码的延迟执行。

setTimeout()方法只能被执行一次，如果希望反复的执行该方法中包含的代码，则应该在setTimeout()方法中包含对自身的调用。

例1 在页面的文本框中按秒速度显示递加的数字，循环执行十次后，弹出提示信息，并调用clearTimeout()方法。

window.onload=function() {
    var t=document.getElementsByTagName("input")[0],
        i=1;
    function f() {
        var out=setTimeout(function() {
            t.value=i++;
            f();
        },1000);
        if(i>10) {
            clearTimeout(out);
            alert("stop");
        }
    }
    f();
}

setInterval()方法 — var o=setInterval(code,interval)

这个方法和setTimeout的方法基本相同，该方法能够周期性地执行指定的代码。所以使用setTimeout实现循环执行指定代码，不如直接用该方法实现。比如上面的例子可以改为：

例2

window.onload=function() {
    var t=document.getElementsByTagName("input")[0],
        i=1,
        out=setInterval(f,1000);
    function f() {
        t.value=i++;
        if(i>10) {
            clearInterval(out);
            alert("stop");
        }
    }
}

在动画设计中，setTimeout()方法适合在不确定时间内持续执行某个动作，儿setInterval()方法适合在有限的时间内执行可以确定起点和终点的动画。