一.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. Linux-dd命令详解【转】

    转自http://www.cnblogs.com/dkblog/archive/2009/09/18/1980715.html   Linux-dd命令详解 dd 是 Linux/UNIX 下的一个非 ...

  2. sql commands

    1,DBCC SQLPERF(logspace) https://msdn.microsoft.com/en-us/library/ms189768.aspx 2, 1, LOGINFO(''HAHA ...

  3. MySQL 5.1.73升级为MySQL 5.5.35详解

    一.前言 二.概述 三.安装MySQL 5.1.73 四.升级为MySQL 5.5.35 五.总结 注,测试环境 CentOS 6.4 x86_64,MySQL 版本(5.1.73.5.5.35)目前 ...

  4. Oracle 12c RAC 搭建手册

    1  共享设备配置 1.1            设备划分说明 冗余策略 卷划分及大小说明 OCRVOTING Ocrvoting01 8G Ocrvoting02 8G Ocrvoting03 8G ...

  5. 在div中设置文字与内部div垂直居中

    要实现如图一所示的结果: html代码如下: <!DOCTYPE html> <html> <head lang="zh"> <meta ...

  6. 理解MySQL——复制(Replication)

    1.复制概述 1.1.复制解决的问题数据复制技术有以下一些特点:(1)    数据分布(2)    负载平衡(load balancing)(3)    备份(4)    高可用性(high avai ...

  7. 20150906VS小知识

    .sln :解决方案管理文件.caproj:项目管理文件.cs:程序源代码文件项目文件目录下有个bin文件夹,里面的debug文件夹,里面存放生成后的程序. //注释一行/* */ 注释一段 alt ...

  8. webconfig中配置各种数据库的连接字符串

    mysql连接串: <add name="ConnectionString" connectionString="Server=localhost;Database ...

  9. Nginx 499错误的原因及解决方法

    今天进行系统维护,发现了大量的499错误, 499错误 ngx_string(ngx_http_error_495_page), /* 495, https certificate error */n ...

  10. html颜色字体字符代码

    HTML字体代码表 宋体 SimSun   宋体:SimSuncss中中文字体(font-family)的英文名称 黑体 SimHei   Mac OS的一些: 微软雅黑 Microsoft YaHe ...