【自己总结】：

语法  setInterval(code,interval)

①可以有第三个参数，第三个参数作为第一个参数（函数）的参数

②第一个参数是函数，有三种形式：

　　1、传函数名，不用加引号，也不加括号，如 setInterval( func, 1000)

　　2、传匿名函数，实际和1是一样的

　　3、传函数字符串，加引号，也要加括号。如 setInterval("func()",1000);   这种方法，会在全局作用域下查找函数，有时候有问题。所以推荐前两种

附两篇很详细的教程

第一篇        http://www.softwhy.com/forum.php?mod=viewthread&tid=3972

第二篇　　http://www.softwhy.com/forum.php?mod=viewthread&tid=6940

第一篇

setInterval()方法的定义和用法:
此方法可以按照指定的周期执行来执行一段程序；周期是以毫秒为单位的。
window.setInterval()方法当然也可以简写成setInterval()。
特别说明:凡是属于window对象的方法都可以直接使用，无需使用window对象调用。
如果不关闭游览器或者调用clearInterval()将会永远的执行下去。
返回值是当前定时器的唯一ID标识。
语法结构:

[JavaScript] 纯文本查看 复制代码运行代码
1
setInterval(code,interval)

参数列表:

参数 列表
code 必需。要周期执行的程序。
interval 必需。周期的时间跨度，以毫秒计算。

浏览器支持:
（1）.IE浏览器支持此方法。
（2）.Firefox浏览器支持此方法。
（3）.Opera浏览器支持此方法。
（4）.chrome浏览器支持此方法。
（5）.safria浏览器支持此方法。
代码实例:

[HTML] 纯文本查看 复制代码运行代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script type="text/javascript">
window.onload = function () {
  var count = 0;
  var bt = document.getElementById("bt");
  function show(){
    document.getElementById("ant").innerHTML = count + 1;
    count =count +1;
  }
  var flag = setInterval(show, 1000);
  bt.onclick = function () {
    clearInterval(flag);
  }
}
</script>
</head>
<body>
<div id="ant">0</div>
<input type="button" id="bt" value="停止定时器"/>
</body>
</html>

上面的代码中，数字会进行累加操作；点击按钮之后能够停止定时器方法的执行。
传递三个参数:
大多数教程对于setInterval()方法的介绍可能到此为止，其实内容还有挺多的。
先来看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script type="text/javascript">
window.onload = function () {
  var count = 0;
  var max = 20;
  var bt = document.getElementById("bt");
  function show(max) {
    if (count >= max) {
      clearInterval(flag);
      return;
    }
    document.getElementById("ant").innerHTML = count + 1;
    count = count + 1;
  }
 
  var flag = setInterval(show, 1000, max);
  bt.onclick = function () {
    clearInterval(flag);
  }
}
</script>
</head>
<body>
<div id="ant">0</div>
<input type="button" id="bt" value="停止定时器"/>
</body>
</html>

由上面的代码可以看出setInterval()方法可以接收三个参数，此参数会作为参数传递给第一个函数参数。
也就是说max会作为一个参数传递给函数show()，当count的值大于等于max时，会停止定时器的执行。
此语法结构是ES5新增，所有具有一定的浏览器兼容问题:
（1）.IE9和IE9以上浏览器支持此语法格式。
（2）.谷歌浏览器支持此语法格式。
（3）.火狐浏览器支持此语法格式。
（4）.opera浏览器支持此语法格式。
（5）.safria浏览器支持此语法格式。
第一个参数类型:
在上面的代码中，第一个参数类型是函数对象（推荐方式），其实第一个参数也可以是一个字符串。
代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script type="text/javascript">
var flag = null;
var count = 0;
var max = 20;
 
function show(max) {
  if (count >= max) {
    clearInterval(flag);
    return;
  }
  document.getElementById("ant").innerHTML = count + 1;
  count = count + 1;
}
window.onload = function () {
  var bt = document.getElementById("bt");
  flag=setInterval("show()", 1000, max);
 
  bt.onclick = function () {
    clearInterval(flag);
  }
}
</script>
</head>
<body>
<div id="ant">0</div>
<input type="button" id="bt" value="停止定时器"/>
</body>
</html>

上面的代码setInterval()方法的第一个参数是一个字符串，这种处理方式类似于eval()方法。
但是要特别注意一下作用域问题，如果第一个参数是字符串，那么会在全区作用域查找show()函数。

[HTML] 纯文本查看 复制代码运行代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script type="text/javascript">
var flag = null;
var count = 0;
var max = 20;
window.onload = function () {
  var bt = document.getElementById("bt");
  function show(max) {
    if (count >= max) {
      clearInterval(flag);
      return;
    }
    document.getElementById("ant").innerHTML = count + 1;
    count = count + 1;
  }
 
  flag=setInterval("show()", 1000, max);
  bt.onclick = function () {
    clearInterval(flag);
  }
}
</script>
</head>
<body>
<div id="ant">0</div>
<input type="button" id="bt" value="停止定时器"/>
</body>
</html>

我们把show()方法定义在window.onload事件处理函数之内，那么就报错了。

第二篇

可以事先参阅setInterval()用法一章节。

学过JavaScript 脚本语言的都应该接触过setInterval 函数.如何使用我想大家都知道，但是有时候还是会在使用的时候碰到这样或那样的问题。下面的问题也是在QQ群经常碰到有人问的最多的，问题如下图：
<ignore_js_op>

首先声明：本人技术水平很低，以下所诉完全是依照自己的理解来做一些说明。如果有不当之处，还请批评斧正！以下仅仅是对自己理解，就当完事扯蛋吧！其内容都非常浅显，聊的多了自己也搞不定了！因为真的怕扯蛋扯疼了！

在JavaScript中的setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数来将其停止。

其实提上对函数的调用均能执行。首先我们看以下代码

[HTML] 纯文本查看 复制代码运行代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
      function fun() {
            alert(1);
        }
        setInterval("fun()",1000);//全局作用域下正常执行
        setInterval(fun(),1000); //调用函数正常，setInterval调用出错
        setInterval(fun,1000);  //正确
    </script>
</head>
<body>
 
</body>
</html>

我所给出的代码和提问题人是一样的，唯一的区别就是函数名不同罢了！如果大家做了相关测试都应该知道，就以上代码来说都会弹出结果1.
当然以上代码其执行环境为全局。setInterval 第一个参数 可以是函数名、匿名函数、函数的引用以及其他可执行代码。

[JavaScript] 纯文本查看 复制代码运行代码
1
setInterval("fun()",1000);

其中这种加引号的调用就可以理解为 可执行代码  就行eval 一样去执行第一个参数，就是对fun方法的调用 理所当然的弹出 1  一秒钟间隔，一直执行。
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

[JavaScript] 纯文本查看 复制代码运行代码
1
setInterval(fun(),1000);

而这个调用我就不理解使用者通过这种方式使用setInterval 的意图为何.
fun() 是对函数的直接调用，也就是说当setInterval还没有开始函数func就执行了。如果这个函数没有返回值或者返回值不是可执行的函数或者其他的代码的话，就以上代码而言只是弹出1，之后就遍报错了.
难道这样的调用真的不可以吗？其实是可以的！例如代码：

[JavaScript] 纯文本查看 复制代码运行代码
1
2
3
4
5
6
      function funone() {
          return function () {
            alert("qishiwoyenengzhixing")
          }
      }
setInterval(funone(), 1000);//你敢说我不能执行？

我个人认为这种设计或者调用完全没有任何意义，用其他的方法就行了。
--------------------------------------------------------------------------------------------------------------

[JavaScript] 纯文本查看 复制代码运行代码
1
setInterval(fun,1000); //这种方法是正确的。

大家可以把这种调用setInterval的第一个参数看作参数为 函数名或函数的引用。当然我们还可以这样调用，使用匿名函数。

[JavaScript] 纯文本查看 复制代码运行代码
1
2
3
4
setInterval(function () {
 
            alert("我一秒中执行一次");
        }, 1000)

---------------------------------------------------------------------------------------------------------------

有些人可能发现，在全局作用域下  setInterval("fun()",1000); 可以正常执行，但放到window.onload函数中却不能执行。为什么呢？
先请看代码：

[JavaScript] 纯文本查看 复制代码运行代码
1
2
3
4
5
6
7
8
9
window.onload = function () {
            function fun() {
                alert(1);
            }
             setInterval("fun()",1000);//这个报错了 未定义   重点在这一个
            // setInterval(fun(), 3000); //这个和刚才全局的表现一样
           // setInterval(fun,1000);//这个没有问题
 
        }

setInterval("fun()",1000); 这种调用报未定义，在全局我们已经说过了 。我们可以把带引号的参数理解为 可执行代码 。
而setInterval现在把以引号包括的可执行代码进行处理。就像eval一样给予执行。其在执行中 fun() 执行环境发生了变化，不是在window.onload方法下，而是在全局环境中也就是window.大家应该知道JavaScript存在作用域链，由内向外依次查找。内部可以访问其上层的函数和变量，而外部却不能访问内部的函数和变量。JavaScript有一个预编译处理，首先对函数和变量进行预编译。也就是说其函数和变量作用域是在其声明的时候确定的，而不是在执行的时候确定。当setInterval把"fun()"执行环境换为全局的后，对fun的调用是无效的。因为全局不能访问局部的函数和变量。window.onload相对于window来说就是局部的。

对与setInterval(fun(), 3000)和setInterval(fun,1000)调用其执行环境并没有改变，所以是可以访问的到的。只不过setInterval(fun(), 3000)执行后 会报错的，其调用错误。在之前已经讲过了，这里就不啰嗦了！

------------------------------------------------------------------------------------------------
为了让大家明白 setInterval("fun()",1000)  的调用是以可执行代码 执行。给出以下代码共大家测试：

[JavaScript] 纯文本查看 复制代码运行代码
1
2
3
4
function fun() {
            alert(1);
        }
        setInterval("alert(fun)",2000);
[JavaScript] 纯文本查看 复制代码运行代码
1
setInterval("var a=1;var b=2;c=a+b;alert(c);",1000); //大家说这个会是什么呢 ？

 

js setInterval详解的更多相关文章

  1. js对象详解(JavaScript对象深度剖析，深度理解js对象)

    js对象详解(JavaScript对象深度剖析,深度理解js对象) 这算是酝酿很久的一篇文章了. JavaScript作为一个基于对象(没有类的概念)的语言,从入门到精通到放弃一直会被对象这个问题围绕 ...

  2. Node.js npm 详解

    一.npm简介 安装npm请阅读我之前的文章Hello Node中npm安装那一部分,不过只介绍了linux平台,如果是其它平台,有前辈写了更加详细的介绍. npm的全称:Node Package M ...

  3. Vue.js项目详解

    还是以Blog项目来讲解,最近我本人利用闲暇时间,以博客作为参考学习一些新的技术并尝试之前没有尝试过的思路来玩玩. 技术看似枯燥,但是带有一个目的来学,你会发现还是蛮有趣的. 主要实践的就是前后端分离 ...

  4. JS 面向对象详解

    面向对象详解1 OO1.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  5. 开胃小菜——impress.js代码详解

    README 友情提醒,下面有大量代码,由于网页上代码显示都是同一个颜色,所以推荐大家复制到自己的代码编辑器中看. 今天闲来无事,研究了一番impress.js的源码.由于之前研究过jQuery,看i ...

  6. jquery图片切换插件jquery.cycle.js参数详解

    转自:国人的力量 blog.163.com/xz551@126/blog/static/821257972012101541835491/ 自从使用了jquery.cycle.js,我觉得再也不用自己 ...

  7. 值得收藏的js原型详解

    从虚无到Object 起初,地是空虚混沌,渊面黑暗:这时候一切还是null 神说,要有原型,于是就有了prototype 原型从凭空产生,于是需要一个指向于null的特征,人们把这种特征叫做隐式原型, ...

  8. 第三天：JS事件详解-事件流

    学习来源: F:\新建文件夹 (2)\HTML5开发\HTML5开发\04.JavaScript基础\6.JavaScript事件详解 学习内容:  1)基础概念 2)举例说明: 代码如上,如果用事件 ...

  9. 第二十二课：js事件原理以及addEvent.js的详解

    再看这篇博客之前,希望你已经对js高级程序编程一书中的事件模块进行了详读,不然我只能呵呵了. document.createEventObject,在IE下创建事件对象event. elem.fire ...

随机推荐

  1. HDU 3691 Nubulsa Expo(全局最小割)

    Problem DescriptionYou may not hear about Nubulsa, an island country on the Pacific Ocean. Nubulsa i ...

  2. 【centos】centos安装g++

    gcc在Centos下的安装:使用的是以下语句:yum install gcc 以为安装g++,类似的应该使用:yum install g++ 可是提示:command is not found 查询 ...

  3. web接口的开发

    老样子,抛出一个问题:什么是接口? 不解释了,百度吧. 了解起来先从HTTP开始说起吧. HTTP协议的特点: 1,无连接,就是指每次连接都仅仅只处理一个请求,服务器处理完客户的请求之后,收到客户的应 ...

  4. javaweb导出excel

    百度找了半天也没找到一个提供有效思路的,全都告诉我此路不通 html表格数据粘贴到txt,然后改后缀为xsl,打开,发现二者无缝对接 @参考文章.@参考前任项目 /** * @todo * @para ...

  5. vue生产环境部署总结

    参考:http://www.cnblogs.com/vipstone/p/6910255.html 1. vue项目根目录/config/index.js更改资源生成路径 assetsPublicPa ...

  6. java 爬虫

    由于项目需求,综合了几种考虑方案,准备使用java 爬虫进行数据的获取,不用自己去费劲的想逻辑的实现 使用java爬虫之前,我们必须要掌握的知识: 1. 对前端HTML的元素有一定的认识 2. 使用h ...

  7. Exception starting filter encodingFilter

    1. maven运行tomcat6出现错误Exception starting filter encodingFilter: 严重: Exception starting filter encodin ...

  8. linux操作系统重启后 解决nginx的pid消失问题

    重启了linux服务器之后,进程性的 nginx -s stop后再次启动nginx -s reload ,总是会报错误nginx: [error] open() "/alidata/ser ...

  9. mysql 复制原理与实践

    复制功能是将一个mysql数据库上的数据复到一个或多个mysql从数据库上. 复制的原理:在主服务器上执行的所有DDL和DML语句都会被记录到二进制日志中,这些日志由连接到它的从服务器获取,并复制到从 ...

  10. JFinal文件上传时直接使用getPara()去接受表单的数据接收到的数据一直是null?

    解决方案: 在文件上传页面form 标签中使用: enctype="multipart/form-data" 在controller类中先调用getFile系列方法才能使getPa ...