setInterval()與setTimeout()區別

admin發表於2018-08-27

首先強調一點，這兩個方法之間的區別是非常明顯的。

如果說對兩者之間的差別還有所疑惑的話，只能說兩個方法本身的用法還沒有完全搞清楚。

相關閱讀：

（1）.JavaScript setInterval()一章節。

（2）.JavaScript setTimeout()一章節。

下面本文再來介紹一下它們兩者的區別，希望對初學者能夠帶來比較好的助益。

一.名稱的區別：

這不是廢話嗎，不同方法的名字自然有區別。

其實沒有這麼簡單，程式語言中，概念或者方法等命名都是與其功能相關聯的。

比如作用域，一看就知道它是規定某些東西的作用範圍的，replace方法自然是具有替代功能。

標題中的方法也不能免俗，從它們的名字就可以區分出它們的作用。

（1）.setInterval是set+Interval的合成詞。

（2）.setTimeout是set+Timeout的合成詞。

set具有設定設定的意思。

（1）.Interval具有間隔和區間的意思，在這裡我們就可以大體推測，setInterval方法與設定時間間隔有關。

（2）.Timeout具有延遲或者延時的意思，那麼很自然的推測，setTimeout方法與設定時間延遲有關。

二.方法的區別：

由前面的分析，我們已經大致得出兩者的區別，下面直接給出結論：

（1）.setInterval用來規定以指定的時間間隔重複執行指定程式碼，預設可以執行無數次。

（2）.setTimeout用來規定延遲指定時間後執行指定程式碼，預設只會執行一次。

三.程式碼例項：

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

上面的規定每隔1000毫秒執行一次匿名函式，數字會不斷得到累加，並同時寫入div。

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

上面的程式碼數字只會增加一，因為setTimeout方法只是延遲1000好秒後執行一次匿名函式。

其實使用setTimeout方法也可以實現setInterval方法實現的數字累加效果。

程式碼修改如下：

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

上面的程式碼同樣實現了計數功能，採用的是遞迴方式。

相關文章