JavaScript clearInterval()

admin發表於2019-01-06
JavaScript

定時器方法setInterval可以規定每隔指定時間，週期性執行回撥函式。

預設狀態，如果不關閉瀏覽器，定時器方法將永遠執行下去。

實際專案中，更多時候會根據需要來決定定時器方法是否繼續執行。

此時，本文的主角clearInterval方法的功能將得以體現，它可以停止setInterval定時器方法的執行。

從clearInterval方法的名稱也可以看出它與setInterval方法的關係，注意這一點可能有助於記憶。

本文首先分享clearInterval基本用法，然後結合程式碼例項介紹一下此方法實際應用中需要特別注意的地方。

關於setInterval用法內容可以參閱JavaScript setInterval()一章節。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
clearInterval(id)

引數解析：

（1）.id：必需，將要被停止執行的setInterval函式的返回值，它是當前定時器方法的唯一標識。

clearInterval方法屬於window物件，凡是window物件的方法都可以直接使用，無需使用window呼叫。

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

瀏覽器支援：

（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>
<style type="text/css">
#num{
  width:60px;
  text-align:center;
  color:red;
}
</style>
<script>
window.onload = function () {
  let count = 0;
  let odiv=document.getElementById("num");
  let obt=document.getElementById("bt");
  function done(){
    odiv.innerHTML = count;
    count = count + 1;
  }
  let flag = setInterval(done, 1000);
  obt.onclick = function () {
    clearInterval(flag);
  }
}
</script>
</head>
<body>
<div id="num">0</div>
<input type="button" id="bt" value="停止計數"/>
</body>
</html>

通過setInterval方法實現數字累加效果，點選按鈕可以停止定時器函式的執行。

程式碼分析如下：

（1）.setInterval每隔1000毫秒呼叫一次回撥函式done，由此實現了數字累加效果。

（2）.定時函式呼叫的時候會返回一個值，此值是當前定時器函式的唯一標識。

（2）.標識與定時器函式一一對應，兩次定時器函式的呼叫返回的標識是不同的。

（3）.點選按鈕後，執行事件處理函式，通過clearInterval函式停止與標識對應的定時器函式的執行。

上述程式碼簡單且直白，再來看一段稍微複雜一些程式碼：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
* {
  padding: 0;
  margin: 0;
}
#box {
  height: 200px;
  width: 200px;
  background: red;
  position: absolute;
  top: 0;
  left: -200px;
}
span {
  right: -20px;
  top: 50%;
  position: absolute;
  width: 20px;
  background: green;
}
</style>
<script>
window.onload=function(){
  let oBox=document.getElementById('box');
  let time=null;
  function startMove(offset){
    clearInterval(time);
    time=setInterval(function(){
      let speed=(offset-oBox.offsetLeft)/10;
      speed=speed>0?Math.ceil(speed):Math.floor(speed);
      if(oBox.offsetLeft==offset){
        clearInterval(time);
      }else{
        oBox.style.left=oBox.offsetLeft+speed+'px'
      }
    },30)
  }
  oBox.onmouseover=function(){
    startMove(0)
  };
  oBox.onmouseout=function(){
    startMove(-200)
  };
}
</script>
</head>
<body>
<div id="box">
  <span>檢視</span>
</div>
</body>
</html>

上述程式碼實現了側邊欄展開與收縮功能，裡面有clearInterval方法的應用，下面進行一下分析。

（1）.預設div元素隱藏在左側，僅顯示它的span子元素。

（2）.滑鼠懸浮，div元素會從左側逐漸展現出來，當完全展現完畢，clearInterval停止定時器方法的執行，很容易理解。

（3）.滑鼠離開的時候，div會逐漸隱藏起來，完全隱藏完畢，clearInterval停止定時器方法的執行。

（4）.上面都是展開和收縮完全完成的情況，但是還有一種情況，當div尚未完全展示出來的時候，滑鼠離開，此時向外展開的定時器方法正在執行，又要開始一個收縮的定時器方法，所要首先停止向外展開的定時器方法，否則會造成收縮與展開同時存在的現象，那麼div快可能就會左右抖動現象，這就是函式startMove內頂部呼叫clearInterval方法的作用，所以在編寫程式碼的時候要考慮周全，防止出現一些意想不到的現象。

上述程式碼用到了若干比較常用的JavaScript方法或者屬性，本文不做介紹，具體參閱如下幾篇文章：

（1）.offsetLeft屬性參閱JavaScript offsetLeft一章節。

（2）.Math.ceil方法參閱JavaScript Math.ceil()一章節。

（3）.Math.floor方法參閱JavaScript Math.floor()一章節。

相關文章