转载

setTimeout与setInterval

最近在看js, 觉得单单用jQuery这个框架作出某些互动效果很简单, 想看看底层的东西打打基础, 今天Party请病假没来（最近N多中招的）, 我也就闲那么一天, 上网看简单点的js实例，有一个这样的例子：《一个走动的时间》

<html> <head> <script type="text/javascript"> var timer = null function stop() { clearTimeout(timer) } function start() { var time = new Date() var hours = time.getHours() var minutes = time.getMinutes() minutes=((minutes < 10) ? "0" : "") + minutes var seconds = time.getSeconds() seconds=((seconds < 10) ? "0" : "") + seconds var clock = hours + ":" + minutes + ":" + seconds document.forms[0].display.value = clock timer = setTimeout("start()",1000) } </script> </head> <body onload="start()" onunload="stop()"> <form> <input type="text" name="display" size="20"> </form> </body> </html>

很简单是吧，我也觉得，于是就不看源码自己写了下面这个，发现效果达成，不过运行一阵子之后就卡卡，然后浏览器就阵亡了。

<html>
<head> <script type="text/javascript"> window.onload=start; function start(){ var timer; var date=new Date(); var seconds=((date.getSeconds()<10)?"0":"")+date.getSeconds(); d=date.getHours()+":"+date.getMinutes()+":"+seconds; document.getElementByIdx_x_x_x("time").innerHTML=d; timer=setInterval(start,1000); } </script> </head> <body onLoad="start"> <div class="time" id="time"></div> </body> </html>

在群里问了一下，得到一个解决方案如下：

<html> <head> <script type="text/javascript"> function init(){ timer=setInterval(start,1000); } function start(){ var timer; var date=new Date(); var seconds=((date.getSeconds()<10)?"0":"")+date.getSeconds(); d=date.getHours()+":"+date.getMinutes()+":"+seconds; document.getElementByIdx_x_x_x("time").innerHTML=d; } </script> </head> <body onLoad="init()"> <div class="time" id="time"></div> </body> </html>

但是我很奇怪为什么interval放在里面会卡, 百度了一下，是这样一个存在： setTimeout与setInterval都可以在JS里设定延时，而且使用类似，不同的是： SetInterval为自动重复，setTimeout不会重复。 setTimeout会在延迟时间后执行函数，但是只执行一次，而setInterval会循环的执行，这样我上面写的那段会由于interval的循环执行导致线程太多，浏览器卡死。刚刚在网上看到又一种解决方法，补充一下：

function start(){ var timer; var date=new Date(); var seconds=((date.getSeconds()<10)?"0":"")+date.getSeconds(); d=date.getHours()+":"+date.getMinutes()+":"+seconds; document.getElementByIdx_x_x_x("time").innerHTML=d; clearInterval(timer); timer=setInterval(start,1000); }

运行一次就清理clear一次，然后再用，这样就把循环变成只执行一次。 setTimeout与setInterval调用的函数不能传递参数，这样说不行的： timer=setTimeout(move(startPoint,endPoint),10); 解决方法： timer=setTimeout(function(){move(startPoint,endPoint);},10); 用一个匿名函数包装起来，把真正想调用的函数写在匿名函数里面，这样想传参数就传呗..... 在此记下, 以供查看。

正文到此结束