使用setTimeout递归实现定时操作和使用setInterval有什么区别？

浴火_凤凰 2010-03-18 03:54:38
请看如下两段代码：
代码段1：


function test(){

JavaScript code goes here。。。



setTimeout(test,1000);

}

test();

代码段2：


function test(){

JavaScript code goes here。。。





}

setInterval(test,1000);


上面两段代码执行起来在执行效率上、内存占用上、性能上或者其它的方面，
有什么区别吗？
使用哪一种更好一些呢？为什么？
希望能解开我心中的疑问。
谢谢！！！
...全文
2189 24 打赏 收藏 转发到动态 举报
写回复
用AI写文章
24 条回复
切换为时间正序
请发表友善的回复…
发表回复
cuixiping 2010-11-05
  • 打赏
  • 举报
 回复
setInterval比递归setTimeout好！
老外写的那篇说setInterval不好的文章值得商榷，根据我的实测，不存在老外说的那个问题。

自测方法：
页面写100000+个setTimeout递归，运行半个小时之后，看资源消耗；
页面写100000+个setInterval，运行半个小时之后，看资源消耗；
浴火_凤凰 2010-04-19
  • 打赏
  • 举报
 回复
[Quote=引用 22 楼 kk3k2005 的回复:]
从语法来看
setTimeout 就是表示指定多少时间后 执行一个方法
至于setTimeout中执行的函数在继续setTimeout调用本身 这个应该属于技巧 不属于setTimeout本身的含义
这样就明显区别于setInterval

从效果上可以看出 setInterval 中调用的方法基本属于原子型的 他不需要理会自己下次被调用会怎么样
而setTimeout中再递归调用方法……
[/Quote]
看来使用setTimeout比setInterval要好啊！！！
hjy40231 2010-03-19
  • 打赏
  • 举报
 回复
[Quote=引用 16 楼 windzjp 的回复:]
function test(){
JavaScript code goes here。。。

setTimeout(test,1000);
}
test();

如时写成以下这样,会出现什么情况,我还没想明白,如果按js单线程的解释其结果应该和setInterval一样了.
function test(){
setTimeout(test,1000);
JavaScript code goes here。。。


}
test();
[/Quote]

这两种写法应该只是第一次调用有所不同吧，前一种第一次执行“JavaScript code goes here。。。”这部分是没有延时的。后面一种和setInterval是不一样的，和第一种类似
艾思软件-app开发公司 2010-03-19
  • 打赏
  • 举报
 回复
[Quote=引用 14 楼 kingwolf_javascript 的回复:]
请看如下代码：
JScript code
function test(){

alert("Hello!!!");

}
setInterval("test()",3000);


等待20多秒后再单击确定，只有一个弹出框啊！
并不像文档中所说的那样（会一起弹出好几个弹出框）
而且下一个弹出框还是在3秒后弹出。
我的测试环境是ie6，这是为什么？[/Quote]

alert是挂起...
艾思软件-app开发公司 2010-03-19
  • 打赏
  • 举报
 回复
JavaScript引擎是单线程的，强制所有的异步事件排队等待执行
setTimeout 和 setInterval 在执行异步代码的时候有着根本的不同
如果一个计时器被阻塞而不能立即执行，它将延迟执行直到下一次可能执行的时间点才被执行（比期望的时间间隔要长些）
如果setInterval回调函数的执行时间将足够长（比指定的时间间隔长），它们将连续执行并且彼此之间没有时间间隔。
--------------------------------------

还有一点重要的区别

setTimeout递归执行的代码必须是上一次执行完了并间格一定时间才再次执行
比仿说: setTimeout延迟时间为1秒执行, 要执行的代码需要2秒来执行,那这段代码上一次与下一次的执行时间为3秒. 而不是我们想象的每1秒执行一次.

setInterval是排队执行的
比仿说: setInterval每次执行时间为1秒,而执行的代码需要2秒执行, 那它还是每次去执行这段代码, 上次还没执行完的代码会排队, 上一次执行完下一次的就立即执行, 这样实际执行的间隔时间为2秒

这样的话在我看来, 如果setInterval执行的代码时间长度比每次执行的间隔段的话,就没有意义,并且队伍越来越长,内存就被吃光了.如果某一次执行被卡住了,那程序就会被堵死

而setTimout以下写法不会出现因为一次被堵住,而内存被吃光的问题. 但是执行的时间隔是不准确和确定的
function test(){
JavaScript code goes here。。。

setTimeout(test,1000);
}
test();

如时写成以下这样,会出现什么情况,我还没想明白,如果按js单线程的解释其结果应该和setInterval一样了.
function test(){
setTimeout(test,1000);
JavaScript code goes here。。。


}
test();
jack_liu4Ye 2010-03-19
  • 打赏
  • 举报
 回复
学习了！！！！！！！！！！！！！
KK3K2005 2010-03-19
  • 打赏
  • 举报
 回复
从语法来看
setTimeout 就是表示指定多少时间后 执行一个方法
至于setTimeout中执行的函数在继续setTimeout调用本身 这个应该属于技巧 不属于setTimeout本身的含义
这样就明显区别于setInterval

从效果上可以看出 setInterval 中调用的方法基本属于原子型的 他不需要理会自己下次被调用会怎么样
而setTimeout中再递归调用方法（递归是顺着大家的话来说，其实我不觉得方法中再setTimeout属于递归） 则方法每次的递归调用应该是有关联的（没任何关联的话 为什么不直接setInterval？）

由上得出效率不知道
但setInterval应该适合定时任务，每次任务之间不需要关联
setTimeout的递归调用应该是属于连续的事务操作

最终setTimeout可以模拟setInterval 反过来则不行
浴火_凤凰 2010-03-19
  • 打赏
  • 举报
 回复
[Quote=引用 10 楼 foolbirdflyfirst 的回复:]
setInterval有风险。
推荐setTimeout吧。

不是有篇很出名的有关定时器的文章吗？jquery作者John Resig写的。
http://www.phpweblog.net/rainman/archive/2009/01/05/6267.html
[/Quote]
请看如下代码：


function test(){



alert("Hello!!!");



}

setInterval("test()",3000);

等待20多秒后再单击确定，只有一个弹出框啊！
并不像文档中所说的那样（会一起弹出好几个弹出框）
而且下一个弹出框还是在3秒后弹出。
我的测试环境是ie6，这是为什么？
yousite1 2010-03-19
  • 打赏
  • 举报
 回复
setInterval效率好
BooJS 2010-03-19
  • 打赏
  • 举报
 回复
setInterval会因为callback的执行时间过长而导致callback之间的间隔时间有所缩短
setTimeout不会有类似问题。
rainsilence 2010-03-18
  • 打赏
  • 举报
 回复
你觉得每次调用一遍效率高？？？
另外，文档看过没，你怎么样才能clearTimeout，还有clearInterval???
不就是通过setTimeout和setInterval返回的随机数字？

那么每次都生成一遍你觉得怎么样？？
浴火_凤凰 2010-03-18
  • 打赏
  • 举报
 回复
[Quote=引用 11 楼 rainsilence 的回复:]
setTimeout 执行一次
setInterval 执行无限次。。。。。

用了setTimeout，之所以无限次执行，原因在于在调用的函数里又调用了setTimeout

启动的地方
setTimeout(cal 1000);

调用的方法
function cal() {

//以上为要执行的代码

// 最后递归下
setTimeout(cal, 1000);……
[/Quote]
看来各位都没有认真看我的内容啊！！！
setTimeout 执行一次
setInterval 执行无限次。。。。。
这点我是知道的。
rainsilence 2010-03-18
  • 打赏
  • 举报
 回复
setTimeout 执行一次
setInterval 执行无限次。。。。。

用了setTimeout，之所以无限次执行，原因在于在调用的函数里又调用了setTimeout

启动的地方
setTimeout(cal 1000);

调用的方法
function cal() {

//以上为要执行的代码

// 最后递归下
setTimeout(cal, 1000);
}
foolbirdflyfirst 2010-03-18
  • 打赏
  • 举报
 回复
setInterval有风险。
推荐setTimeout吧。

不是有篇很出名的有关定时器的文章吗？jquery作者John Resig写的。
http://www.phpweblog.net/rainman/archive/2009/01/05/6267.html
浴火_凤凰 2010-03-18
  • 打赏
  • 举报
 回复
[Quote=引用 7 楼 ws_hgo 的回复:]
个人觉得setTimeout
因为SetInterval不停的调用消耗内存

HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://……
[/Quote]
可是我的那两段代码都是不停的调用的啊！！！
Peter200694013 2010-03-18
  • 打赏
  • 举报
 回复
setTimeout (表达式,延时时间)
setInterval(表达式,交互时间)
setTimeout 在执行时,是在载入后延迟指定时间后,去执行一次表达式,仅执行一次
setInterval 在执行时,它从载入后,每隔指定的时间就执行一次表达式
ws_hgo 2010-03-18
  • 打赏
  • 举报
 回复
个人觉得setTimeout
因为SetInterval不停的调用消耗内存


<!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">

    window.onload=function()

    {

      setTimeout("document.getElementById('aa').innerHTML=new Date().getSeconds();",1000);

      setInterval("document.getElementById('bb').innerHTML=new Date().getSeconds();",1000);

    }

  </script>

</head>

<body>

<div id="aa"></div>

<div id="bb"></div>

</body>

</html>
浴火_凤凰 2010-03-18
  • 打赏
  • 举报
 回复
[Quote=引用 3 楼 cloudgamer 的回复:]
setInterval效率好
setTimeout好控制
[/Quote]
能再说的详细一点吗？太简短了，我有点笨，不太明白。
举个小例子说明一下setTimeout好控制在哪里啊？
passself 2010-03-18
  • 打赏
  • 举报
 回复
setTimeout和setIntelval都有定时的功能！！！取消定时功能的时候，都有对应的clearTimeout以及clearInterval与之对应。

但是他们之间是有区别的！

setTimeout指的是：间隔一段时间后执行，只执行一次

setInterval是指：每隔一段时间执行，执行多次


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

<META NAME="Generator" CONTENT="EditPlus">

<META NAME="Author" CONTENT="">

<META NAME="Keywords" CONTENT="">

<META NAME="Description" CONTENT="">

</HEAD>



<BODY>

<div id="time"></div>

<SCRIPT LANGUAGE="JavaScript">

<!--

var timeid;

function setTime(){

   var date=new Date();

   var h=date.getHours();

   var m=date.getMinutes();

   var s=date.getSeconds();

   document.getElementById("time").innerHTML=h+":"+m+":"+s;

}

timeid=setInterval("setTime()",1000);//他的调用在外部调用，而不是递归调用，表示每隔1s调用一次

function stop(){

   clearInterval(timeid);

}

//-->

</SCRIPT>

<input type="button" value="暂停" onclick="stop()">

<input type="button" value="开始" onclick="timeid=setInterval('setTime()',1000);">

</BODY>

</HTML>

setTimeout


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

<META NAME="Generator" CONTENT="EditPlus">

<META NAME="Author" CONTENT="">

<META NAME="Keywords" CONTENT="">

<META NAME="Description" CONTENT="">

</HEAD>



<BODY>

<div id="time"></div>

<SCRIPT LANGUAGE="JavaScript">

<!--

var timeid;

function setTime(){

   var date=new Date();

   var h=date.getHours();

   var m=date.getMinutes();

   var s=date.getSeconds();

   document.getElementById("time").innerHTML=h+":"+m+":"+s;

   timeid=setTimeout("setTime()",1000);//递归调用，表示1s后执行一次

}

setTime();//页面加载后开始执行

function stop(){

   clearTimeout(timeid);

}

//-->

</SCRIPT>

<input type="button" value="暂停" onclick="stop()">

<input type="button" value="开始" onclick="timeid=setInterval('setTime()',1000);">

</BODY>

</HTML>
郭大侠_ 2010-03-18
  • 打赏
  • 举报
 回复
我觉得用 setInterval 比较好,因为递归消耗内存比较多。
加载更多回复（3）
BetterInterval:使用递归 setTimeout 代替本机 setInterval
更好的间隔 您可以使用递归 setTimeout 代替本机 setInterval。 在此处阅读更多信息： :
javascript 可控式透明特效实现代码
空间就全凭CSS的绝对定位实现位移了。在开始之前，我们练习一下setTimeout的递归用法（用来模拟setInterval）。 代码如下: function text(el){ var node = (typeof el == “string”)? document.getElementById(el) : el; var i = 0; var repeat = function(){ setTimeout(function(){ node[removed] = “

”+i+”

”; i++; if(i <= 100){ setTimeout(arguments.calle
Java大数据培训学校全套教程-窗口及frame（24）
Java大数据培训学校视频课程：java大数据培训学校全套教材系列课程由750集视频构成，基本就 是1）时下流行的java培训学校主流内部教材，2）和市面上培训学校的通 行的课程体系几乎一样。所以这套课程都能自己学下来，等于上了培训学 校一次，完全可以找个java工程师的工作了。 本门课程为java大数据培训学校全套教材系列课程的第二十四篇，学习setInterva，setTimeout，窗口及frame等概念。
js常用代码段整理
每段代码前边都有功能注解和参数要求等说明文字，难度不大也就没做更多注释。 为看得清楚，这里依先后顺序做个小目录： 重写window.setTimeout， 理解递归程序的返回规律， 截取长字符串， 取得元素在页面中的绝对位置， 统计、去除重复字符（多种方法实现）， 把有序的数组元素随机打乱（多种方法实现）。 代码如下: /* 功能：修改 window.setTimeout，使之可以传递参数和对象参数 （同样可用于setInterval） 使用方法： setTimeout(回调函数,时间,参数1,…,参数n) （FF已经原生支持，IE不支持） */ var __sto = setTimeout
js常用代码段收集
每段代码前边都有功能注解和参数要求等说明文字，难度不大也就没做更多注释。 为看得清楚，这里依先后顺序做个小目录： 重写window.setTimeout， 理解递归程序的返回规律， 截取长字符串， 取得元素在页面中的绝对位置， 统计、去除重复字符（多种方法实现）， 把有序的数组元素随机打乱（多种方法实现）。 代码如下: /* 功能：修改 window.setTimeout，使之可以传递参数和对象参数 （同样可用于setInterval） 使用方法： setTimeout(回调函数,时间,参数1,…,参数n) （FF已经原生支持，IE不支持） */ var __sto = setTimeout
JavaScript

87,903

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章