JavaScript 使用定时器

■知识点

window对象包含4个定时器专用方法，使用它们可以实现代码定时运行，或者延迟执行，使用定时还可以设计演示动画。

setTimeoutO方法能够在指定的时间段后执行特定代码。其具体用法如下：

    var o = setTimeout( code, delay )

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

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

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

    var o = setlnterval( code, interval )

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

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

    如果setlnterval()方法的第1个参数是一个函数，则setlnterval()方法可以接受任意多个参数，这些参数将作为该函数的参数使用。其具体用法如下：

    var o = setlnterval( function, interval[,argl,arg2,...argn])

■实例设计

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

<p>段落文本</p>

<script>

var p = document.getElementsByTagName(npn)[0]; 

p.onmouseover = function(i){ 

    setTimeout(function() {

        console.log(p.tagName)

    }, 500);

}

</script>

    setTimeoutO方法的第1个参数虽然是字符串，但是也可以是一个函数。一般建议把函数作为参数传递给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);                                        //定义延迟半秒钟后执行代码

}

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