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()函数在同时执行的情况。
上一篇:Apache的RewriteRule规则详细介绍


下一篇:qt4升级到qt5的一些问题