停止setInterval() 執行

admin發表於2019-01-09

關於setInterval()方法基本用法本文不做介紹，具體參閱JavaScript setInterval()一章節

本章節介紹一下如何停止定時器方法setInterval的執行，程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE HTML>
<html>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload=function(){
  let odiv=document.getElementById("show");
  let obt=document.getElementById("bt");
  let num=0;
  let timer=null;
  function count(){
    num=num+1;
    odiv.innerHTML=num;
  }
  timer=setInterval(count,1000);
  obt.onclick=function(){
    clearInterval(timer);
  }
}
</script>
</head>
<body>
  <div id="show"></div>
  <input type="button" id="bt" value="檢視效果"/>
</body>
</html>

上面的程式碼會自動為div元素中的數字加1，點選按鈕可以停止此效果。

程式碼分析如下：

[JavaScript] 純文字檢視 複製程式碼
let odiv=document.getElementById("show");
let obt=document.getElementById("bt");

通過document.getElementById()方法獲取對應的元素物件。

[JavaScript] 純文字檢視 複製程式碼
let num=0;
let timer=null;

宣告變數num和timer，num用來作為計數器，timer用來儲存setInterval()返回值。

setInterval()方法的每一次呼叫都能返回一個與其唯一對應的識別符號（每次呼叫返回的識別符號都不同）。

[JavaScript] 純文字檢視 複製程式碼
function count(){
  num=num+1;
  odiv.innerHTML=num;
}

每次呼叫count()函式，數字會加1。

[JavaScript] 純文字檢視 複製程式碼
timer=setInterval(count,1000)

定時器方法每隔1000毫秒執行一次count()函式，於是我們看到數字累加效果。

[JavaScript] 純文字檢視 複製程式碼
obt.onclick=function(){
  clearInterval(timer);
}

點選按鈕可以停止定時器函式的執行。

clearInterval()方法的引數是setInterval()方法的返回值。

相關閱讀：

（1）.innerHTML參閱JavaScript innerHTML一章節。

（2）.clearInterval()參閱JavaScript clearInterval()一章節。

（3）.setInterval()參閱JavaScript setInterval()一章節。

相關文章