js setInterval详解

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js setInterval详解相关的知识，希望对你有一定的参考价值。

【自己总结】：

语法  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详解的主要内容，如果未能解决你的问题，请参考以下文章

js 定时器用法详解——setTimeout()setInterval()clearTimeout()clearInterval()

JavaScript中SetInterval与setTimeout的用法详解

有关定时器setTimeout()setInterval()详解

JS中的window.setTimeout()详解

javascript函数setInterval和setTimeout的使用区别详解

javascript定时器详解