标签：
setInterval()和setTimeout()的区别:
以上两个方法都可以用作定时器，它们在语法形式非常的类似，但是功能上却区别巨大，下面结合实例介绍一下它们的异同点。
一.setInterval()函数的语法结构:
setInterval(code,interval)
setInterval()函数可周期性执行一段代码，也就是说代码会被周期性不断的执行下去。
函数具有两个参数:
第一个参数:规定周期性执行的代码，并不一定非要是一个函数。
第二个参数:规定周期的时间跨度，单位是毫秒，一秒等于1000毫秒。
二.setTimeout()函数的语法结构:
setTimeout(code,interval)
etTimeout()函数可以在指定的事件之后执行一段代码，此代码只会被执行一次。
函数具有两个参数:
第一个参数:规定要被执行的代码，并不一定非要是一个函数。
第二个参数:规定在多长时间之后执行代码，单位是毫秒，一秒等于1000毫秒。
对以上总结如下:
1.相同点:语法结构相同，都有定时器功能。
2.不同点:执行次数不同，setInterval()函数会无限期执行下去，而setTimeout()函数只会执行一次。
三.扩展阅读:
setTimeout()函数也可以实现循环功能，代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <title>蚂蚁部落</title> <style type="text/css"> div { width:200px; height:50px; margin:0px auto; background-color:green; text-align:center; line-height:50px; color:red; } </style> <script type="text/javascript"> window.onload=function b() { var a=0 function addNumber() { a=a+1; document.getElementById("num").innerHTML=a; setTimeout(addNumber,1000); } addNumber(); } </script> </head> <body> <div id="num"></div> </body> </html>
以上代码同样实现了循环功能，那就是将setTimeout()函数放在addNumber()函数内部然后再调用addNumber()函数。
再来看使用setInterval()实现上述功能的代码实例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <title>蚂蚁部落</title> <style type="text/css"> div { width:200px; height:50px; margin:0px auto; background-color:green; text-align:center; line-height:50px; color:red; } </style> <script type="text/javascript"> window.onload=function b() { var a=0 function addNumber() { a=a+1; document.getElementById("num").innerHTML=a; } setInterval(addNumber,1000); } </script> </head> <body> <div id="num"></div> </body> </html>
段代码实例的功能看上去是一模一样的，其实有这很大的区别的，尤其是当addNumber()执行时间越长差距就表现的越明显。
原因如下:
1.setTimeout()函数执行循环的方式:当addNumber()函数执行到末尾，可以说已经执行完毕的情况下再开始下一个循环执行，每一次循环的执行都是单独执行的。如果说addNumber()函数执行需要2秒的话，那么每两次addNumber()函数执行的时间间隔是2+1=3秒。
2.setInterval()函数执行循环的方式:setInterval()函数是每间隔指定的时间就去执行一次addNumber()函数，也就是说无论addNumber()函数是否执行完毕，只要到了指定的时间间隔都会去执行addNumber()函数，也就是说每两次addNumber()函数执行的时间间隔永远是1秒，如果addNumber()函数执行时间超过1秒的话，,就出现多个addNumber()函数在同时执行的情况。
原文地址是:http://www.51texiao.cn/javascriptjiaocheng/2015/0427/227.html
标签：
原文地址：http://www.cnblogs.com/nulifendou/p/4642843.html
