一.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. vi 常用命令行

    vi 常用命令行 1.vi 模式  a) 一般模式: vi 处理文件时,一进入该文件,就是一般模式了.  b) 编辑模式:在一般模式下可以进行删除,复制,粘贴等操作,却无法进行编辑操作.等按下‘i,I ...

  2. 谷歌 analytics.js 部分解密版

    源:http://www.google-analytics.com/analytics.js (function(){var aa=encodeURIComponent,f=window,ba=set ...

  3. P1010 笨小猴【tyvj】

    /*=========================================================== P1010 笨小猴 描述 Description 笨小猴的词汇量很小,所以每 ...

  4. php 开启COM组件

    1.先到PHP.INI中打开COM选项,com.allow_dcom = true 2.我这里的环境是PHP5.4.7,PHP 5.4.5后,com/dotnet 模块已经成了单独的扩展,所以需要在P ...

  5. Javax.mail.NoSuchProviderException: smtp

    UT 这个错误是因为缺jar包 下载地址:在oralce下载一个 JavaMail 包 http://www.oracle.com/technetwork/java/javamail/index-13 ...

  6. CSS深入之label与input对齐!

    我想很多人都会碰到label与input 对齐的问题. 这个东西本身不难,但是要做到与IE这个东西兼容确实有点头疼. 参考各大门户网站的前端源码. 得一方法,以记录之: html确实很简单: 帐号 输 ...

  7. CA接口测试类

    package com.creditharmony.adapter.testCase.ca; import org.junit.Test; import com.alibaba.druid.util. ...

  8. HBase(七): HBase体系结构剖析（下)

    目录: write Compaction splite read Write: 当客户端发起一个Put请求时,首先根据RowKey寻址,从hbase:meta表中查出该Put数据最终需要去的HRegi ...

  9. javascript 中根据sort 方法随机数组 （Math.random）

    var arr = [1,2,3,4,5,6,7,8,9,10]; function Arandom(a,b){ return (Math.random() > 0.5) ? 1 : -1;; ...

  10. Struts2 - Action no cache

    整了两天,终于找到一个比较满意的答案了:如何让action不被浏览器缓存 写一个interceptor: package com.my.interceptor; import javax.servle ...