【自己总结】：

语法  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. jQuery跳转到页面指定位置

    @参考博客 var t = $("#id").offset().top;// 获取需要跳转到标签的top值 //$(window).scrollTop(t);// 跳转到指定位置 ...

  2. Windows 64 位 mysql 5.7.20 安装教程

    mysql 5.7以上版本包解压中没有data目录和my-default.ini和my.ini文件以及服务无法启动的解决办法以及修改初始密码的方法 mysql官网下载地址:https://dev.my ...

  3. Activity 的启动过程深入学习

    手机应用也是一个app,每一个应用的icon都罗列在Launcher上,点击icon触发onItemClick事件. 我们要启动「淘宝」这个App,首先我们要在清单文件定义默认启动的Activity信 ...

  4. 利用scp 远程上传下载文件/文件夹

    scp [-1246BCpqrv] [-c cipher] [-F ssh_config] [-i identity_file] [-l limit] [-o ssh_option] [-P port ...

  5. tiny4412 启动方式

    1.iROM(BL0):是指Exynos4412的iROM中固化的启动代码,其作用是初始化系统时钟,设置看门狗,初始化堆和栈,加载8kb的bl1到Exynos4412的一个64kb大小内部sram(I ...

  6. js函数定义和调用

    由于JavaScript的函数也是一个对象,上述定义的abs()函数实际上是一个函数对象,而函数名abs可以视为指向该函数的变量. var abs = function (x) { if (x > ...

  7. Liunx mv（转）

    转竹子—博客:http://www.cnblogs.com/peida/archive/2012/10/27/2743022.html mv命令是move的缩写,可以用来移动文件或者将文件改名(mov ...

  8. hdu 1757 (矩阵快速幂) 一个简单的问题 一个简单的开始

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1757 题意不难理解,当x小于10的时候,数列f(x)=x,当x大于等于10的时候f(x) = a0 * ...

  9. 八皇后问题（dfs)

    #include <iostream> #include <stdio.h> using namespace std; ; ], b[], c[], vis[][]; //a, ...

  10. JoyOI1935 导弹防御塔

    原题链接 首先可以二分答案,然后考虑检验答案. 我们可以对炮塔进行拆点,即能发射\(x\)颗导弹就拆成\(n\times x\)个点,作为一个集合,另一个集合则是\(m\)个侵入者,然后对于能在剩余时 ...