JavaScript BOM操作 使用window对象 → 使用定时器：setInterval() / setTimeout() 方法

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

window对象定时器方法

方法	说明
setInterval()	按照指定的周期(以毫秒计)来调用函数或计算表达式
setTimeout()	在指定的毫秒数后调用函数或计算表达式
clearInterval()	取消由setInterval()方法生成的定时器对象
clearTimeout()	取消由setTimeout()方法生成的定时器对象

1、setTimeout() 方法

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

var timer = setTimeout(code,delay);
//code:表示要延迟执行的代码字符串，该字符串语句可以在window环境下执行，如果包含多个语句，应该使用分号进行分隔
//delay:表示延迟的时间，以毫秒为单位。
//该方法返回值是一个TimerID，这个ID编号指向延迟执行的代码控制句柄。如果把这个句柄传递给clearTimeout()则会取消代码的延迟执行

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

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

setTimeout() 方法的第一个参数虽然是字符串，但是我们通常把 JavaScript 代码封装在一个函数体内，然后把函数引用作为参数传递给 setTimeout() 方法，等待延迟调用，这样就避免了传递字符串的疏漏和麻烦了。

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

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

这样当鼠标移过每个 body 元素下的子元素时，都会延迟半秒钟后弹出一个提示对话框，提示该元素的名称。

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

var nodes = document.getElementsByTagName("body")[0].childNodes;    //获取body对象所有子元素
for(var i=0;i<nodes.length;i++){           //遍历元素集合
    nodes[i].onmouseover = function(i){    //注册鼠标经过事件处理函数
        return function(){        //返回闭包函数
            fun(nodes[i]);        //调用函数fun，并传递当前对象引用
        }
    }(i);    //调用函数并传递循环序号，实现在闭包中存储对象序号值
    nodes[i].onmouseout = function(i){    //注册鼠标移出事件处理函数
        return function(){                //返回闭包函数
            clearTimeout(nodes[i].out)    //调用函数clearTimeout，清除已注册的延迟处理函数
        }
    }(i);    //调用函数并传递循环序号，实现在闭包中存储对象序号值
}
function fun(o){    //延迟处理函数
    o.out = setTimeout(function(){
        alert(o.tagName);    //显示当前元素的名称
    },500);
}

setTimeout() 方法只能执行依次，如果希望仿佛执行该方法中包含的代码，则应该在setTimeout() 方法中包含对自身的调用，这样就可以把自己注册为可以反复执行的方法。

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

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

2、setInterval() 方法

使用 setTimeout() 方法模拟循环执行指定代码，不如直接调用 setInterval() 方法来实现。setInterval() 方法能够周期性执行指定的代码，如果不加以处理，那么该方法将会被持续执行，直到浏览器窗口被关闭，或者跳转到其他页面位置。用法如下：

var timer = serInterval(code,delay);

该方法的用法与setTimeout() 方法基本相同，其中参数 code 表示要周期执行的代码字符串，而 interval 参数表示周期执行的时间间隔，以毫秒为单位。该方法返回的值是一个 TimerID，这个 ID 编号指向对当前周期函数的执行的引用，利用该值对计时器进行访问。如果把这个值传递给 clearTimeout() 方法，则会强制取消周期性执行的代码。

此外，setInterval() 方法的第一个参数如果是一个函数，则 setInterval() 方法还可以跟随任意多个参数，这些参数将作为此函数的参数使用，格式如下：

var timer = setInterval(function,interval[arg1,arg2,...argn]);

针对上面的自身调用自身来实现循环执行的 setTimeout() 方法，可以这样设计：

<input type="text">
<script>
    var node = document.getElementsByTagName("input")[0];
    var i =  1;
    var out = setInterval(fun,1000);
    function fun(){
        node.value = i++;
        if(i>10){                  //如果超过10次，则清除执行，并弹出提示信息。
            clearTimeout(out);
            alert("10秒钟到了");
        }
    }
    fun();    //调用函数
</script>

setTimeout() 和 setInterval() 方法在用法上十分相似，不过二者的区别是很明显的，setTimeout() 方法主要用来延迟代码执行，而 setInterval() 方法主要实现周期性执行代码。