如何停止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(){
  var odiv=document.getElementById("show");
  var obt=document.getElementById("bt");
  var num=0;
  var 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，點選按鈕可以停止此效果。

setInterval方法返回定時器方法的標識，只要將此標識作為clearInterval方法的引數即可停止對應setInterval。

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

相關文章