详解JavaScript中Window对象的两个方法setTimeout与setInterval

作者:admin     字体:[增加 减小]    类型:原创
setTimeout()和setInterval()可以用来注册在指定的时间之后单次或重复调用的函数。因为它们都是客户端JavaScript中重要的全局函数,所以定义为Window对象的方法,但作为通用函数,其实不会对窗口做什么事情。

setTimeout()和setInterval()可以用来注册在指定的时间之后单次或重复调用的函数。因为它们都是客户端JavaScript中重要的全局函数,所以定义为Window对象的方法,但作为通用函数,其实不会对窗口做什么事情。

Window对象的setTimeout()方法用来实现一个函数在指定的毫秒数之后运行。setTimeout()返回一个值,这个值可以传递给clearTimeout()用于取消这个函数的执行。setInterval()和setTimeout()一样,只不过这个函数会在指定毫秒数的间隔里重复调用:

setInterval(updateClock,60000);  //每隔60秒调用一次updateClock()

和setTimout()一样,setInterval()也返回一个值,这个值可以传递给clearInterval(),用于取消后续函数的调用。

下面的函数会在等待指定的时间之后,开始重复调用某个函数,然后又过了一段时间之后取消函数调用。该例子演示了setTimeout()、setInterval()和clearInterval()的用法。

/**
*定时器应用函数
*安排函数f()在未来的调用模式
*在等待了若干毫秒之后调用f()
*如果设置了interval并没有设置end参数,则对f()调用将不会停止
*如果没有设置interval和end,只在若干毫秒后调用f()一次
*只有指定f(),才会从start=0的时刻开始
*注意,调用invoke()不会阻塞,它会立即返回
*/
function invoke(f,start,interval,end) {
    if( !start ) {      //默认设置为0毫秒
        start = 0;
    }

    if( arguments.length<=2 ) { //单次调用模式
        setTimeout(f,start); //若干毫秒后的音效调用模式
    } else {                    //多次调用模式
        setTimeout(repeat,start);    //在若干毫秒后调用repeat()
        function repeat() { //在上一行所示的setTimeout()中调用
            var h = setInterval(f,interval); //循环调用f()
            if (end) {  //在end毫秒后停止调用,前提是end已经定义了
                setTimeout(function(){clearInterval(h);},end);
            }
        }
    }
}

我们利用上面的函数,制作一个数字时钟。


由于历史原因,setTimeout()和setInterval()的第一个参数可以作为字符串传入。如果这么做,那这个字符串会在指定的超时时间或间隔之后进行求值(相当于执行eval())。除前两个参数之外,HTML5规范(除IE之外的所有浏览器)还允许setTimeout()和setInterval()传入额外的参数,并在调用函数时把这些参数传递过去。然而,如果需要支持IE的话,就不要应用此特性了。

如果以0毫秒的超时时间来调用setTimeout(),那么指定的函数不会立刻执行。相反,会把它放到队列中,等到前面处于等待状态的事件处理程序全部执行完之后,再“立即执行”。