setTimeout与setInterval


《一个走动的时间》

<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(startPo int,endPoint),10);

解决方法:
timer=setTimeout(function(){move(startPoint,endP oint);},10);
用一个匿名函数包装起来,把真正想调用的函数写在匿名 函数里面,这样 想传 参数就传呗.....

在此记下, 以供查看。

你可能感兴趣的:(setTimeout与setInterval)