JavaScript浏览器之setTimeout()与setInterval()@慕课网原创_慕课网

超时调用：setTimeout()

setTimeout()接受两个参数：

1、第一个参数可以是一个包含JavaScript代码的字符串，也可以是一个函数。

例子：

setTimeout( 'alert("Hello")', 2000);
setTimeout(function(){ alert("world"); }, 2000);

2、第二个参数是一个表示等待多长时间的毫秒数，但经过该时间后指定的代码不一定会执行。JavaScript是一个单线程序的解释器，因此一定时间内只能执行一段代码。为了控制要执行的代码，就有一个JavaScript任务队列。这些任务会按照将它们添加到队列的顺序执行。setTimeout()的第二个参数告诉JavaScript再过多长时间把当前任务添加到队列中。如果队列是空的，那么添加的代码会立即执行；如果队列不是空的，那么它就要等前面的代码执行完了以后再执行。

例子：

setTimeout(function(){ alert("you"); }, 500);
setTimeout(function(){ alert("love"); }, 0);
alert("I");

调用setTimeout()之后，该方法会返回一个数值ID，指向超时调用。要取消尚未执行的超时调用计划，可以调用clearTimeout()方法并将相应的超时调用ID作为参数传递给它。

例子：

<button>Cancel</button>

var outID=setTimeout(function(){ alert("hello,world"); }, 3000);
document.getElementsByTagName('button')[0].onclick=function(){
    clearTimeout(outID);
}

间歇调用：setInterval()

1、setInterval()方法接收的参数与setTimeout()相同。
2、要取消尚未执行的间歇调用，可以使用clearInterval()方法并传入相应的间歇调用ID。

例子：

var num=0,
    max=5,
    valID=setInterval(plusNum,500);
    function plusNum(){
        alert(++num)
        if(num==max){
            clearInterval(valID);
            alert("Max")
        }
    }

间歇调用可能会在前一个间歇调用结束之前就启动，所以使用超时调用来模拟间歇调用是一种最佳模式。

例子：

var num=0,
    max=5
    setTimeout(plusNum,500);
    function plusNum(){
        alert(++num)
        if(num<max){
            setTimeout(plusNum,500);
        }else{
            alert("Max")
        }
    }

文中的代码部分，带有“例子”和“测试代码”字样的，只是用来学习或测试某一功能用的代码，不可以直接用于项目的开发中。带有“代码如下”字样的，都是经过本人测试，简单修改即可用于项目开发中的代码，如有错误，欢迎指出。

JavaScript浏览器之setTimeout()与setInterval()原创