JS中setTimeout和setInterval的使用

之前在别的论坛问了个问题，那个时候对setTimeout和setInterval不懂，而那个时候也一直以为这两个的作用是一样的，最近才算真正的了解这两个的区别，今天就记录下这两个的区别，

 

阅读目录：

　　1.setTimeout介绍
　　2.setInterval介绍
　　3.总结

 

setTimeout介绍

JavaScript是单线程语言，但它可以通过setTimeout和setInterval来调度代码在特定时间执行。setTimeout是在指定时间后执行代码，而setInterval是在每隔指定时间就执行一次代码。

var i=0;
setTimeout(function(){
    console.log('这是第%s次', i++);
}, 1000);

//结果
这是第0次

setTimeout可以叫超时调用，到了时间就调用，他需要传递两个参数，第一个参数可以是一个引起来的代码串也可以是一个函数，第二个传递一个数字表示超时的时间，毫秒为单位。

之前我在这里问了一个问题：http://cnodejs.org/topic/51ff717a44e76d216afe24e8之前不明白，现在明白了。

JavaScript是一个单线程序的解释器，因此在一定时间内她只能执行一段代码，为了控制要执行的代码，就有一个JavaScript任务队列，这些任务会按照他们添加到队列的顺序执行。setTimeout的第二个参数会告诉JavaScript再过多久时间把当前任务添加到队列中，如果队列是空的，那么添加的代码可以立即执行，如果队列不是空的，那么他要等前面的代码执行完毕在执行。

所以有时候我们使用setTimeout的时候时间不太准确！我上面的提问就是很好的例子，

调用setTimeout()之后，该方法会返回一个数值ID，表示超时调用。这个ID是计划执行代码的唯一标识，可以通过此ID取消超时调用，如：

var i=0;

var timer = setTimeout(function(){
    console.log('这是第%s次', i++);
}, 5000);

clearTimeout(timer);   //这里就可以取消

当然使用clearTimeout必须在超时调用之前，如果超时调用执行过了，再调用这个就没有用了。

 

setInterval介绍

setInterval可以称作间歇调用，他会按照指定间隔时间重复执行代码，直至间歇调用被取消。他的参数含义和setTimeout一模一样。如：

var i=0;

setInterval(function(){
    console.log('这是第%s次', i++);
}, 1000);

//结果
这是第0次
这是第1次
这是第2次
这是第3次
这是第4次
这是第5次
这是第6次
这是第7次
........

调用setInterval()方法同样会返回一个间歇调用ID，也可以通过clearInterval()方法来取消此ID间歇调用。

在刚才上面的例子中也可以通过setTimeout来实现：

var i=0;

function time(){
    console.log('这是第%s次', i++);
    setTimeout(time, 1000);
}

setTimeout(time, 1000);

//结果
这是第0次
这是第1次
这是第2次
这是第3次
这是第4次
这是第5次
这是第6次
这是第7次
......

效果是一样的。

 

总结

一般认为，使用超时调用setTimeout来模拟间歇调用setInterval是一种最佳的模式。因为每次使用setTimeout之后如果不在设置另一次超时调用，调用就会自动停止，而setInterval却会一直执行。在开发中很少真正使用setInterval,因为后一个间歇调用可能会在前一个间歇调用结束前调用，而setTimeout却可以避免这个问题，但是setTimeout的使用不好也会出现这个问题，我上面的提问就非常好的说明了这个问题，有时候真的是技术能力的问题导致的，和技术无关。