SetInterval和SettimeOut(转载文章)

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

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

在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)调用其执行I环境并没有改变，所以是可以访问的到的。只不过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); //大家说这个会是什么呢 ？
时间： 2024-11-08 19:41:10

SetInterval和SettimeOut(转载文章)的相关文章

javascript中window与document对象、setInterval与setTimeout定时器的用法与区别

一.写在前面 本人前端菜鸟一枚,学习前端不久,学习过程中有很多概念.定义在使用时容易混淆,在此给向我一样刚踏入前端之门的童鞋们归纳一下.今天给大家分享一下js中window与document对象.setInterval与setTimeout定时器的用法与区别.讲得不对的地方,烦请大家指正,还望前辈.大牛多多指教! 二.window对象与document对象的用法和区别 window是全局对象,document是window对象的一个属性它也是一个对象.如图: document对象指的页面这个文档

关于setInterval和setTImeout中的this指向问题

前些天在练习写一个小例子的时候用到了定时器,发现在setInterval和setTimeout中传入函数时,函数中的this会指向window对象,如下例: var num = 0; function Obj (){ this.num = 1, this.getNum = function(){ console.log(this.num); }, this.getNumLater = function(){ setTimeout(function(){ console.log(this.num)

js中setInterval与setTimeout用法

setTimeout 定义和用法: setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式. 语法: setTimeout(code,millisec) 参数: code (必需):要调用的函数后要执行的 JavaScript 代码串. millisec(必需):在执行代码前需等待的毫秒数. 提示: setTimeout() 只执行 code 一次.如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout(). 两种调用函数的写法:

JavaScript定时调用函数(SetInterval与setTimeout)

setTimeout和setInterval的语法相同.它们都有两个参数,一个是将要执行的代码字符串,还有一个是以毫秒为单位的时间间隔,当过了那个时间段之后就将执行那段代码. 不过这两个函数还是有区别的,setInterval在执行完一次代码之后,经过了那个固定的时间间隔,它还会自动重复执行代码,而setTimeout只执行一次那段代码. 区别:window.setTimeout("function",time)://设置一个超时对象,只执行一次,无周期 window.setInter

JS里设定延时:js中SetInterval与setTimeout用法

js中SetInterval与setTimeout用法 JS里设定延时: 使用SetInterval和设定延时函数setTimeout 很类似.setTimeout 运用在延迟一段时间,再进行某项操作. setTimeout("function",time) 设置一个超时对象 setInterval("function",time) 设置一个超时对象 SetInterval为自动重复,setTimeout不会重复. clearTimeout(对象) 清除已设置的se

js中setInterval与setTimeout用法 实现实时刷新每秒刷新

setTimeout 定义和用法:  setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式. 语法:  setTimeout(code,millisec) 参数:  code (必需):要调用的函数后要执行的 JavaScript 代码串. millisec(必需):在执行代码前需等待的毫秒数. 提示:  setTimeout() 只执行 code 一次.如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout(). 两种调用函数的

对转载文章却不加原文链接的人感到恶心

最近在接触 U3D,经过近两个多月的学习和研究,对 U3D 有了点点了解,于是就想把知道的一切写成文章,以让后来者少走弯路!可是有些人实在无耻!当然我不反对自己写的文章能被别人转载,但是文章被别人转载的时候不愿意加原文链接,也实在让我无语,更恶心的是还把图片的水印都去掉了,并且加上了自己网站的水印!对这种人真是感觉愤怒了,别人辛苦编写的例子.代码.文章,你一个转载就把别人的成果变成自己的了? 其实我的网站图片在没有加水印之前,我在其网站上面留言,让其把原文链接加上去,但是此人把留言删除了!后来没

JavaScript函数setInterval()和setTimeout()正确的写法

一.常规写法 1.1 不传参数 function a (x, y) { var i = 0; var b = function(){ console.log((x * y) + (i++)); } return b; } var c = a(1, 2); setInterval('c()', 1000); 1.2 传参数 function c (x, y) { console.log(x * y); } setInterval('c(1, 2)', 1000); 二.改进写法 2.1 不传参数

JS中setInterval、setTimeout不能传递带参数的函数的解决方法

setInterval 和 setTimeout 这两个函数比较好用,但会遇到比如说我隔个几秒后要执行的函数是带参数的,这种情况怎么办?可以用匿名函数包装处理 //不带参数的函数 function test(){} setTimeout(test,1000) //带参数的函数,用匿名函数包装(可以实现动态传参) function onemodelanima(o, tobestatus, time, easing, origin){ if(easing == null){ easing = "&q