JavaScript clearTimeout()

admin發表於2019-01-08
JavaScript

掌握一個概念可以從名稱入手，因為其名稱很大程度上能夠體現映它的功能。

clearTimeout() 可以停止定時器 setTimeout() 執行，分解兩個方法名稱：

setTimeout 由如下兩個單詞合成：

（1）.set：設定

（2）.timeout：超時。

那麼也就是設定一個超時時間，超過這個時間就會執行回撥函式。

setTimeout() 方法更多內容參閱JavaScript setTimeout()一章節。

clearTimeout 由如下兩個單詞合成：

（1）.clear：清除

（2）.timeout：超時。

clearTimeout() 與 setTimeout() 之間的關係就清楚了，它可以清除或者說停止由 setTimeout() 方法設定的定時器的執行，如果到這裡還是不夠清晰，不用擔心，後面會有詳細的程式碼例項演示。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
clearTimeout(id_of_settimeout)

引數解析：

（1）.id_of_settimeout：要被停止的定時器的標識，將要被停止 setTimeout() 的返回值。

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

瀏覽器支援：

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

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

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

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

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

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

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title>
<style type="text/css">
#ant{ 
  width:150px; 
  height:100px; 
  text-align:center; 
  line-height:100px; 
  background-color:#ccc; 
  color:red; 
} 
</style> 
<script> 
let count = 0; 
let flag 
window.onload = function(){ 
  let odiv=document.getElementById("ant");
  let bt = document.getElementById("bt"); 
  let flag=setTimeout(function(){
    odiv.innerHTML="螞蟻部落";
  },2000);
  bt.onclick=function(){
    clearTimeout(flag);
  }
} 
</script> 
</head> 
<body> 
<div id="ant"></div> 
<input type="button" id="bt" value="檢視演示"/>
</body> 
</html>

程式碼分析如下：

（1）.如果不點選按鈕，那麼在2000毫秒，也就是2秒鐘之後，會將指定字串寫入div。

（2）.點選按鈕之後，會呼叫clearTimeout方法，它的引數是setTimeout定時器函式的標識。

（3）.於是就會停止定時器函式的執行，2秒後也不會執行回撥函式，也就是不會將字串寫入div。

上述程式碼非常簡單，再來看一個通過setTimeout方法實現的計數效果，然後再通過clearTimeout方法停止計數。

程式碼例項如下：

[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:150px; 
  height:60px; 
  text-align:center; 
  line-height:60px; 
  background-color:#ccc; 
  color:red; 
} 
</style> 
<script> 
let count = 0; 
let flag 
window.onload = function(){ 
  let num = document.getElementById("num"); 
  let bt = document.getElementById("bt"); 
  function jishu(){ 
    num.innerHTML = count; 
    count = count + 1; 
    flag = setTimeout(jishu,1000); 
  } 
  jishu() 
     
  bt.onclick = function(){ 
    clearTimeout(flag); 
  } 
} 
</script> 
</head> 
<body> 
<div id="num"></div> 
<input type="button" id="bt" value="檢視效果"/>
</body> 
</html>

點選按鈕可以停止計數效果，程式碼分析如下：

（1）.通常使用setInterval方法實現計數效果，使用setTimeout方法同樣可以。

（2）.jishu函式每執行一次可以將數字寫入div，並加1，但此函式的核心在於最後的部分。

（3）.jishu的最後通過定時器函式setTimeout規定1秒後呼叫jishu函式自身，通過遞迴實現數字不斷累加效果。

（4）需要注意的是，每一次呼叫setTimeout，它的返回值都是不同的，定時器函式的標識都是一一對應的。

（5）.點選按鈕之後，通過clearTimeout停止setTimeout的執行，那麼也就停止了遞迴效果。

筆者本人感覺文章對標題中的方法已經有了足夠清晰的介紹，如果還有疑問，可以在文件底部留言。

相關文章