(转)setInterval与clearInterval详解

计时计数器经常会用到的两个函数。

首先注意：setInterval与clearInterval都是直属于window对象的。

时间间隔可以通过setInterval命令来创建并用clearInterval命令来终止。

setInterval所用的参数有两种格式：

代码一：

<div id="oDiv_showCurrTime0" style="border:1px solid black; height:20px;"></div>
<script>
var dT = document.getElementById("oDiv_showCurrTime0");
//var inX = setInterval("funX()",1000);    
var inX = setInterval(funX,1000); //setInerval直接使用时，这两种方法都可以
    function funX(){
        var dTime = new Date();
        dT.innerHTML = dTime.toLocaleTimeString()
    }
</script>

代码2：函数调用setInterval和clearInterval

<div id="oDiv_showCurrTime" style="border:1px solid black; height:20px;"></div><button onclick="startX()">开始</button><button onclick="stopX()">停止</button>
<script>
var intX; //这个必须写在startX函数外或不写，stopX才有效。
function startX(){
 intX= setInterval(func,500) //通过函数调用setInterval时，第一个参数不可以用"func()"这种形式，只能直接用函数名
    var dT = document.getElementById("oDiv_showCurrTime");
    function func(){
        var dTime = new Date();
        dT.innerHTML = dTime.toLocaleTimeString()
    }
}
function stopX(){
    window.clearInterval(intX) //注意！如果var intX定义在startX内，则无法清除！
}
</script>

可能你已经注意到了，如果又需要在函数中调用，但又需要带参数怎么办？

代码3：函数调用带有参数的setInterval

<div id="oDiv_showCurrTime" style="border:1px solid black; height:20px;"></div><button onclick="startX()">开始</button><button onclick="stopX()">停止</button>
<script>
var intX; //这个必须不写或者写在startX函数外，stopX才有效。
var arr = new Array;
arr[0]="rrr" 
function startX(){
 //intX= setInterval(func("rrr"),500) 这种方法是错误的。如果需要调用带参数的函数，直接使用func("rrr")会在第一次加载后，提示参数无效
 intX= setInterval(function(){func.apply(this,arr)},500) //apply参数问题请查资料
    function func(a){
        var dT = document.getElementById("oDiv_showCurrTime");
        var dTime = new Date();
        dT.innerHTML = a + dTime.toLocaleTimeString()
    }
}
function stopX(){
    window.clearInterval(intX) //注意！如果var intX定义在startX内，则无法清除！
}
</script>