一.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()函数在同时执行的情况。

setInterval()和setTimeout()的区别的更多相关文章

  1. setInterval与setTimeout的区别

    在制作网页动态效果时,一定会遇到某些需求,要求某段程序等待多时时间后再开始执行,就像在我们的生活中一样,待会儿再开始做一件事.在JavaScript中主要通过定时器实现此类需求,本文将对定时器做一个概 ...

  2. 第46天：setInterval与setTimeout的区别

    js的setTimeout方法用处比较多,通常用在页面刷新了.延迟执行了等等.今天对js的setTimeout方法做一个系统地总结. setInterval与setTimeout的区别 说道setTi ...

  3. val();html();.text()区别 setInterval与setTimeout的区别

    val();html();.text()区别   对于innerHTML 属性,几乎所有的元素都有innerHTML属性,它是一个字符串,用来设置或获取位于对象起始和结束标签内的HTML.(获取HTM ...

  4. setInterval和setTimeout的区别以及setInterval越来越快问题的解决方法

    setInterval()和setTimeout()方法都是js原生的定时方法,当然它们两个的作用也是不同的,并且最近在做上下滚动公告栏的时候,发现了setInterval()非常令人抓狂的问题,那就 ...

  5. JS中setInterval与setTimeout的区别

    JS里设定延时: 使用SetInterval和设定延时函数setTimeout 很类似.setTimeout 运用在延迟一段时间,再进行某项操作. setTimeout("function& ...

  6. 【JavaScript】setinterval和setTimeout的区别

    计时器setTimeout()与setInterval()是原生JS很重要且用处很多的两个方法, 但很多人一直误以为是相同的功能: 间隔时间重复执行传入的句柄函数. 但实际上, 并非如此, 既然JS给 ...

  7. setInterval和setTimeout的区别

    setInterval会每隔指定的毫秒数后反复执行指定代码. setTimeout只会在指定的毫秒数后执行一次指定代码. setInterval的用法: // 创建(创建后即开始计时) var int ...

  8. setInterval()与setTimeout()的区别

    setInterval()-一旦被开启就会不断的执行,使用clearInterval()清除后将不再执行 setTimeout()-又称为一次定时器,定时器开启后只执行一次将不会接着执行,使用clea ...

  9. setInterval与setTimeout 的区别

    setInterval在执行完一次代码之后,经过了那个固定的时间间隔,它还会自动重复执行代码,而setTimeout只执行一次那段代码     用法: setInterval("alert( ...

随机推荐

  1. 向左对齐的Gallery

    系统自带的Gallery选中的item总是在组件的中间.但是有些时候我们需要把选中的元素放在左边或者是Gallery一出来就要放在左边.修改Gallery靠左对齐的思路:1.Gellary总是对cen ...

  2. Android开发常用的一些第三方网站

    聚合数据-免费数据调用 https://www.juhe.cn/ 有赞- 免费的微商城 http://youzan.com/ 秀米微信图文编辑器 http://xiumi.us/ 禅道项目管理软件 h ...

  3. 关于spring 3.0.5的 <mvc:resources mapping="***" location="***">标签的使用

    spring mvc 的<mvc;resources mapping="***" location="***">标签是在spring3.0.4出现的 ...

  4. unity，UNITY_PROJ_COORD和tex2Dproj

    看ProjectorMultiply.shader,有这么一句: fixed4 texS = tex2Dproj (_ShadowTex, UNITY_PROJ_COORD(i.uvShadow)); ...

  5. noip2014普及组 比例简化

    题目描述 在社交媒体上,经常会看到针对某一个观点同意与否的民意调查以及结果.例如,对某一观点表示支持的有1498 人,反对的有 902人,那么赞同与反对的比例可以简单的记为1498:902. 不过,如 ...

  6. JavaScript对象就是一组属性(方法)的集合

    在JavaScript中,每个对象可以看作是多个属性(方法)的集合,引用一个属性(方法) 很简单,即: 对象名.属性(方法)名 除此之外,还可以用方括号的形式来引用: 对象名[“属性(方法)名”] 注 ...

  7. 解决 nginx https反向代理http协议 302重定向localtion到http问题

    location /rest { #proxy_redirect off; proxy_set_header Host $host; proxy_set_header X-Real-IP $remot ...

  8. SQL2008安装自动退出

    一同事安装sql 2008 然后删除过,后来再也装不上了,安装SQL2008操作执行到安装支持文件的时候就会出现安装过程自动退出的现象. 网上很多人说需要卸载,我看原因不一定是这个,因为根本没有安装成 ...

  9. Struts2 - Interceptor中取得ActionName、Namespace、Method

    在Struts2的Interceptor中取得当前执行对应的ActionName.Namespace.Method方法: 可以使用: System.out.println(invocation.get ...

  10. 【jmeter】关联-正则表达和xpath

    话说LoadRunner有的一些功能,比如:参数化.检查点.集合点.关联,Jmeter也都有这些功能,只是功能可能稍弱一些,今天就关联来讲解一下. JMeter的关联方法有两种:后置处理器-正则表达式 ...