Javascript定时器的使用

在Javascript中有两个函数可以实现"定时器"的功能setTimeout和setInterval，这两个函数的参数是相同的，但是代表的意义有所差别。例如setTimeout('test()',3000);的意思是3000毫秒之后执行函数test()(仅仅执行一次)，setInterval('test()',3000); 表示每隔3000毫秒执行一次test()函数。一个是仅仅执行一次一个是不断执行。我们编写如下代码：

<script>
function test(){
    alert('111');
}
setInterval('test()',3000);//每隔3秒执行一次函数test()
</script>

        我们执行会看到每隔3秒会执行alert('111');不会停止，如果编写如下代码：

<script>
function test(){
    alert('111');
}
setTimeout('test()',3000); //3秒之后执行一次(仅仅执行一次)
</script>

        运行会发现3秒后执行一次就不执行了，这就是两者的差别，使用哪一个看我们的具体需求，其实变通一下也可以使setTimeout具有和setInterval同样的功能，例如：

<script>
function test(){
    alert('111');
    setTimeout('test()',3000);//函数内调用
}
setTimeout('test()',3000); //3秒之后执行一次(仅仅执行一次)
</script>

        在函数内执行了setTimeout，这样我们执行后会发现也是每隔3秒执行一次的。另外要注意的是，有时我们需要手动停止执行，例如我们使用定时器实现了图片的漂浮功能（每隔一定时间设置图片的坐标），当鼠标移动到图片时我们需要定时器“失效”，这如何实现呢？如果使用了setInterval那很好办，在执行setInterval后，回返回一个timer ID，如果将该ID传递给函数clearInterval，就可以终止执行调用过的函数了，例如：

<div id="show">0</div>
<script>
function test(){
    var obj = document.getElementById('show');
    obj.innerHTML = parseInt(obj.innerHTML) + 1;
}
function start_add(){
    time_id = setInterval('test()',500);//每隔0.5秒执行一次函数test()
}
</script>
<input type="button" value="点击开始执行" onclick="start_add();" />
<input type="button" value="点击终止执行" onclick="clearInterval(time_id);" />

        可以执行一下以上代码看一下效果。