Javascript定时器的使用

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

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

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

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

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

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

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

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

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