JS中的定時函數(setTimeout,clearTimeout,setInterval,clearInterval詳解 )

設置定時器，在一段時間以後執行指定的代碼，setTimeout與setInterval的區別在於setTimeout函數指定的代碼僅執行一次 方法一： window.setTimeout("alert('ok')",5000);

方法二： window.setTimeout(function() { alert("Ok"); }, 5000);

方法三： function showAlert() { alert("ok"); } window.setTimeout(showAlert, 5000);

clearTimeout 清除setTimeout函數設置的定時器

function showAlert() { alert("ok"); }

var tt = window.setTimeout(showAlert, 5000);

window.clearTimeout(tt);

1.setTimeout,clearTimeout:設置暫停 使用window對象的setTimeout()方法設置暫停。

該方法接受兩個參數，要執行的代碼和在執行它以前要等待的毫秒數(1/1000秒)。

第一個參數能夠是代碼串(與eval()函數的參數相同)，也能夠是函數指針。例如，下面的代碼都在1秒鐘後顯示一條警告： setTimeout("alert('Hello World!')",1000);

setTimeout(function() { alert('Hello World!'); },1000); 固然，還能夠引用之前定義的函數：

function sayHelloWorld() { alert("Hello World!"); }

setTimeout(sayHelloWorld,1000);

調用setTimeout()時，它建立一個數字暫停ID，與操做系統中的進程ID類似。暫停ID本質上是要延遲的進程ID，再調用 setTimeout()後，就不該該再執行它的代碼。要取消還未執行的暫停，可調用clearTimeout()方法，並將暫停ID傳遞給它： var iTimeoutId = setTimeout("alert('Hello World!')",1000);

alert(iTimeoutId); clearTimeout(iTimeoutId);

其中，iTimeoutId 是一串數字，例如上述代碼打出的iTimeoutId。 你也許會問：「爲何要定義暫停，又在執行它以前將其取消呢？」請 考慮在大多數應用程序中可見的工具提示。當把鼠標移動到一個按鈕上時，停留一會，等待出 現黃色的文本框，提示該按鈕的功能。若是隻是短暫的把鼠標該按鈕上，而後很快將其移動到另外一個按鈕上，那麼第一個按鈕的工具提示就不會顯示，這就是要在執 行暫停代碼前取消它的緣由。由於你在執行代碼前只想等待指定的時間量。若是用戶的操做產生了不一樣的結果，則要取消該暫停。 2.setInterval,clearInterval設置時間間隔 時間間隔與暫停的運行方式類似，只是它無限此地每隔指定的時間段就重複執行一次指定的代碼。可調用setInterval()方法設置時間間隔，它的參數與setTimeout()相同，是要執行的代碼和每次執行之間等待的毫秒數。例如：

setInterval("alert('Hello world!')",1000);

setInterval(function() { alert("Hello world!"); },1000);

function sayHelloWorld() {

　　alert("Hello World!");

}

setInterval(sayHelloWorld,1000); 此外，與setTimeout()相似，setInterval()方法也建立時間間隔ID，以標識要執行的代碼。clearInterval()方法可 用這個ID阻止再次執行該代碼。顯然。這一點在使用時間間隔時更重要，由於若是不取消時間間隔，就會一直執行它，直到頁面被卸載爲止。下面是時間間隔用法的一個常見示例：

var iNum = 0;

var iMax = 100;

var iIntervalId = null;

function incNum() { iNum++; if(iNum == iMax) { clearInterval(iIntervalId); } }

iIntervalId = setInterval(incNum, 500);

在這段代碼中，每隔500毫秒就對數字iNum進行一次增量運算，直到它達到最大值(iMax), 此時該時間間隔將被清除。也能夠用暫停實現該操做，這樣即沒必要跟蹤時間間隔的ID，代碼以下：

var iNum = 0; var iMax = 100; function incNum() {

iNum++;

if(iNum != iMax){

　　 setTimeout(incNum,500);

　　 }

}

setTimeout(incNum,500);

這段代碼使用連接暫停，即setTimeout()執行的代碼頁調用了setTimeout()。若是在執行過增量運算後，iNum不等於 iMax,就調用setTimeout()方法。沒必要跟蹤暫停ID，也沒必要清除它，由於代碼執行後，將銷燬暫停ID。 clearInterval() 方法可取消由 setInterval() 設置的 timeout。 clearInterval() 方法的參數必須是由 setInterval() 返回的 ID 值。 實例 下面這個例子將每隔 50 毫秒調用 clock() 函數。您也可使用一個按鈕來中止這個 clock：

Stop interval