JavaScript setInterval()

admin發表於2018-10-04
JavaScript

本文將通過程式碼例項循序漸進詳細介紹一下setInterval方法的應用。

方法的名稱都會盡量做到名副其實，一定程度上能夠做到見詞達意的效果。

setInterval由set與interval構成，set具有"設定"意思，interval具有"間隔"的意思。

恰如其名，此方法用於為指定程式碼迴圈執行設定時間間隔，例如每隔1000毫秒執行一次指定程式碼。

特別說明：凡是屬於window物件的方法都可以直接使用，無需使用window呼叫。

更多內容可以參閱JavaScript window 物件一章節。

語法結構一： 

[JavaScript] 純文字檢視 複製程式碼
let intervalID = setInterval(func, interval[, param1, param2, ...])

引數解析：

（1）.intervalID：setInterval方法的返回值，作為此次setInterval方法呼叫的唯一標識。

（2）.func：必需，將要被迴圈呼叫的回撥函式。

（3）.interval：必需，週期的時間跨度，以毫秒計算。

（4）.paramN：可選，將要傳遞給func函式的引數。

語法結構二：

[JavaScript] 純文字檢視 複製程式碼
let intervalID = setInterval(codeStr, interval)

引數解析：

（1）.intervalID：setInterval方法的返回值，作為此次setInterval方法呼叫的唯一標識。

（2）.codeStr：必需，JavaScript程式碼字串（不推薦使用此方式，原因與eval方法相同）。

（3）.interval：必需，週期的時間跨度，以毫秒計算。

瀏覽器支援:

（1）.IE瀏覽器支援此方法。

（2）.edge瀏覽器支援此方法。

（3）.谷歌瀏覽器支援此方法。

（4）.opera瀏覽器支援此方法。

（5）.火狐瀏覽器支援此方法。

（6）.safria瀏覽器支援此方法。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script> 
window.onload = function () {
  let count = 0;
  let bt = document.getElementById("bt");
  function done(){ 
    document.getElementById("ant").innerHTML = count + 1;
    count =count +1; 
  } 

  let intervalID = setInterval(done, 1000);

  bt.onclick = function () {
    clearInterval(intervalID);
  }

} 
</script> 
</head> 
<body> 
<div id="ant">0</div>
<input type="button" id="bt" value="停止定時器"/>
</body> 
</html>

上面程式碼實現數字每秒增加1的效果，程式碼分下如下：

（1）.let intervalID = setInterval(done, 1000) ，done函式會被每間隔1000毫秒執行一次。

（2）.done函式能夠實現將數字寫入div，然後將數字加1。

（3）.intervalID是此次setInterval方法呼叫的唯一標識，每一次setInterval方法呼叫返回的標識不同。（4）.clearInterval(intervalID)，可以停止定時器函式的執行。

關於clearInterval用法可以參閱JavaScript clearInterval()一章節。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script> 
window.onload = function () {
  let count = 0;
  let bt = document.getElementById("bt");
  function done(){ 
    document.getElementById("ant").innerHTML = count + 1;
    count =count +1; 
  } 

  let intervalID = setInterval("done()", 1000);

  bt.onclick = function () {
    clearInterval(intervalID);
  }

} 
</script> 
</head> 
<body> 
<div id="ant">0</div>
<input type="button" id="bt" value="停止定時器"/>
</body> 
</html>

方法的第一個引數可以是JavaScript程式碼字串，每隔指定時間執行字串中的程式碼。

程式碼是上述程式碼報錯了，截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201810/04/235744mjjiv9aelnkplkl5.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

報錯原因是，沒有查詢到done函式，這是因為如果第一個引數是字串，那麼將會在全域性作用查詢done函式。

程式碼修改如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script> 
let count = 0;
function done(){ 
  document.getElementById("ant").innerHTML = count + 1;
  count =count +1; 
} 
window.onload = function () {
  let bt = document.getElementById("bt");
  let intervalID = setInterval("done()", 1000);

  bt.onclick = function () {
    clearInterval(intervalID);
  }

} 
</script> 
</head> 
<body> 
<div id="ant">0</div>
<input type="button" id="bt" value="停止定時器"/>
</body> 
</html>

上述程式碼可以正常執行，將函式done放在全域性作用域。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript"> 
window.onload = function () {
  let count = 0;
  let max = 20;
  let bt = document.getElementById("bt");
  function show(max) {
    if (count >= max) {
      clearInterval(flag);
      return;
    }
    document.getElementById("ant").innerHTML = count + 1;
    count = count + 1;
  }
  
  let intervalID = setInterval(show, 1000, max);
  bt.onclick = function () {
    clearInterval(intervalID);
  }
} 
</script> 
</head> 
<body> 
<div id="ant">0</div>
<input type="button" id="bt" value="停止定時器"/>
</body> 
</html>

上述程式碼為setInterval方法傳遞了第三個引數，這個引數會被傳遞給回撥函式。

相關文章