setTimeout()与setInterval()——走马灯效果

JavaScript中的setTimeout()与setInterval()都是指延时执行某一操作。

但setInterval()指每隔指定时间执行某操作,会循环不断地执行该操作;setTimeout()只延时指定时间后执行该操作,且只执行一次。

setTimeout()在某种情况下也能实现setInterval()的效果,比较经典的例子就是在在函数内部调用自己。向下面这样:

function example(){

  ...

  setTimeout("example()", 1000);

}

下面给一个走马灯的例子:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>走马灯</title>
<script>
var i = -100; function setColor()
{
var color = new Array("red","blue","green","black","turquoise","coral","orange","lime","violet");
var i = Math.round(Math.random()*8);
document.getElementById("text").style.color = color[i];
} function setScroll()
{
var text = document.getElementById("text");
text.style.marginLeft = i + "px";
i = i + 10;
if(i > 200){i = -100;}
setTimeout("setScroll()",500);
} function changeColor()
{
setInterval("setColor()",500);
} function func()
{
changeColor();
setScroll();
}
</script>
</head> <body onLoad="func()">
<div style="width:200px; overflow:hidden; background-color:#CCC;"><div id="text" style="width:100px;">显示随机颜色</div></div>
</body>
</html>
上一篇:几种快速傅里叶变换(FFT)的C++实现


下一篇:深入理解ajax系列第二篇——请求方式