【自己总结】：

语法  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. C++中的字符数组与字符指针

    //[C++基础]字符数组和字符指针.cpp//剑指offer上的这段话://为了节省内存,c/c++把常量字符串放到单独的一个内存空间.但是当几个指针赋值给相同的常量字符串时,它们实际上会指向相同的 ...

  2. Djang的model创建的字段和参数复习

    class test_orm(models.Model): id = models.AutoField(primary_key=True) # int自增列,必须填入参数primary_key=Tru ...

  3. 2017.9.26JQuery源码解析一 架构与依赖

    jq1.0: css选择符   事件处理  ajax交互 1.2.3: 引入数据缓存,解决循环引用与大数据保存问题 1.3.  : 使用全新的选择器引擎sizzle,在各个浏览器下全面超越其他同类js ...

  4. oracle 数据库密码过期

    查询密码过期策略 SELECT * FROM dba_profiles s WHERE s.profile='DEFAULT' AND resource_name='PASSWORD_LIFE_TIM ...

  5. 解决JFinal多文件上传时只获取到第一个文件名

    我的思路: 用户生成时随即生成一串随机字符作为该用户的文件上传目录,并保存该字符串到用户的某一字段.需要显示上传的附件时,遍历这个文件夹.上传时可把文件名设置为上传时间. 1.生成上传路径 可写在注册 ...

  6. [z]nativeSql

    http://blog.csdn.net/chenallen1025/article/details/9169543 EntityManager API 提供了创建 Query 实例以执行原生 SQL ...

  7. 分享插件的使用加一个echart走数据

    html部分: <div class="topLink clearfix bdsharebuttonbox  bdshare-button-style0-16" data-b ...

  8. 文件操作 day8

    一,文件操作基本流程. 计算机系统分为:计算机硬件,操作系统,应用程序三部分. 我们用python或其他语言编写的应用程序若想要把数据永久保存下来,必须要保存于硬盘中,这就涉及到应用程序要操作硬件,众 ...

  9. PHP——explode的应用（获取字符串，拆为下拉列表）

    <?php //定义有默认值的函数 function Main3($f=5,$g=6) { echo $f*$g; } Main3(2,3); echo "<br />&q ...

  10. linux 使用笔记6

    ---恢复内容开始--- 1.内容追加 把一个文件的内容追加到另一个文件中: cat first.txt >> second.txt//追加到second.txt文件的末端    cat ...