本文详细介绍JavaScript中setInterval定时器的基本用法，包括其语法结构、参数含义及返回值。通过多个实际代码示例，演示如何利用setInterval实现元素移动、文字输出及实时时钟显示，并重点讲解如何使用clearInterval安全停止定时器，防止内存泄漏。
setInterval 定时器基础概念
setInterval() 方法会持续周期性地调用指定函数，直到调用 clearInterval() 停止该定时器或窗口被关闭。由 setInterval() 返回的 ID 值可作为 clearInterval() 方法的参数，用于取消定时执行。
setinterval(code,millisec[,"lang"]) 是该方法的标准调用格式。
其中，code 参数代表要执行的 JavaScript 代码字符串或函数引用，millisec 参数指定两次调用之间的时间间隔，单位为毫秒。
setInterval 语法与参数说明
代码如下:
<body>
<div id="content" style="position:relative; height:1000px; width:1000px; background-color:#666;">
<div id="one" style="position:absolute;top:0px; left:0px; height:100px; width:100px; background-color:red;"></div>
</div>
<script>
var one=document.getElementById('one')
var x=0;
var y=0;
var xs=10;
var ys=10;
function scroll(){
x+=xs;
y+=ys;
if(x>=document.getElementById('content').offsetWidth-one.offsetWidth-20 || x<=0)
{
xs=-1*xs;
}
if(y>=document.getElementById('content').offsetHeight-one.offsetHeight-20 || y<=0)
{
ys=-1*ys;
}
one.style.left=x;
one.style.top=y;
}
dt=setInterval(scroll,100);
one.onmouseover=function(){
clearInterval(dt);
};
one.onmouseout=function(){
dt=setInterval(scroll,100);
};
</script>
</body>setInterval 实际应用示例
下面举一个简单的例子。
例1
代码如下:
function show(){ trace("每隔一秒我就会显示一次");}
var sh;sh=setInterval(show,1000);
clearInterval(sh);例2
代码如下:
<form>
<input type="text" id="clock" size="35" />
<script language=javascript>
var int=self.setInterval("clock()",50)
function clock(){var t=new Date()
document.getElementById("clock").value=t
}
</script>
</form>
<div id="clock"></div>
<button onclick="int=window.clearInterval(int)">Stop interval</button>