一.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. jQuery - 设置内容和属性

    设置内容 - text().html() 以及 val() 我们将使用前一章中的三个相同的方法来设置内容: text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容( ...

  2. 【Unity3D基础教程】给初学者看的Unity教程（六）：理解Unity的新GUI系统（UGUI）

    作者:王选易,出处:http://www.cnblogs.com/neverdie/ 欢迎转载,也请保留这段声明.如果你喜欢这篇文章,请点推荐.谢谢! 理解UGUI的基础架构 UGUI是Unity在4 ...

  3. android语言适配

    虽然我们现在做的app基本只在国内使用,所以只需要中文,但是我们要把眼光放长远一点,以后我们的APP发展到了国外呢,所以我们就要做语言适配了   很简单 在res目录下,右键  New Resourc ...

  4. MySQL : interactive_timeout v/s wait_timeout

    Most of the database intensive applications are worring about the default values of these variables ...

  5. sed命令拷屏

    http://blog.sina.com.cn/s/blog_45497dfa0100w6r3.html  sed样例较多,可以参考 http://blog.sina.com.cn/s/blog_6d ...

  6. apache mesos 安装

    安装方式: Mesosphere   yum 操作系统:centos7 1. 安装 rpm -Uvh http://repos.mesosphere.io/el/7/noarch/RPMS/mesos ...

  7. HTML 打印 javascript连续打印 分页

    page-break-after属性介绍:http://www.w3school.com.cn/cssref/pr_print_page-break-after.asp <div style=& ...

  8. diamond operator is not supported in -source 1.5

    在mvn install编译的时候出现了,错误 diamond operator is not supported in -source 1.5 的错误信息: 解决方法:在pom.xml文件里面添加: ...

  9. Networking in too much detail

    The players This document describes the architecture that results from a particular OpenStack config ...

  10. JQUERY 拖拽 draggable droppable resizable selectable sortable

    今天用了jq ui的拖动碰撞功能,好不容易看到有详细的API解说,记录如下:   <script language="JavaScript" type="text/ ...