首頁 > 文章 > web前端 > JavaScript中的setTimeout如何使用

JavaScript中的setTimeout如何使用

不言原創: 2018-12-14 17:08:476207瀏覽

setTimeout可以在一定時間後進行一次特定處理，無需重複，本篇文章我們就來看看setTimeout計時器的使用方法。

我們知道在JavaScript中有兩種類型的計時處理器：setInterval和setTimeout，在上一篇文章中我們已經介紹了setInterval定時器，下面的這篇文章我們就來看看JavaScript中的setTimeout定時器的使用方法。

setTimeout() 是屬於 window 的方法，該方法用於在指定的毫秒數後呼叫函數或計算表達式。

基本文法如下

setTimeout（function函数,固定的时间[,参数1,参数2,参数3,.......]）

下面我們就來具體看看setTimeout的用法

我們先來看一段簡單的程式碼

<!DOCTYPE html>
<html lang = "ja">
  <head>
    <meta charset = "utf-8">
    <title>JavaScript</title>
  </head>
  <body>
    <script>
      var count = 0;
      var countup = function(){
        console.log(count++);
      } 
    </script>
  </body>
</html>

準備count的變量，以0為基準，一個一個地計數相加（count ），然後用console.log輸出。並且將這一系列的處理放入countupp的變數中。

假設你想在1000毫秒後呼叫這個變數countup計數，需要加入setTimeout()

程式碼如下

<script>
      var count = 0;
      var countup = function(){
        console.log(count++);
      } 
      setTimeout(countup, 1000);
    </script>

由於setTimeout只呼叫一次，因此輸出0並在1000毫秒後完成。

JavaScript中的setTimeout如何使用

如何使用setTimeout()像setInterval()一樣迭代計數呢？

我們可以在迭代函數中寫入setTimeout，也就是{}，用countup（）呼叫它 ;

程式碼如下

<script>
  var count = 0;
  var countup = function(){
    console.log(count++);
    setTimeout(countup, 1000);
  } 
  countup();</script>

透過這樣做，它從一旦完成處理的點開始再次重複相同的過程1000毫秒。

運作效果如下：處理類似setInterval的行為。

JavaScript中的setTimeout如何使用

如果想要停止計數，我們需要使用clearTimeout。

程式碼如下

var id = setTimeoutl（countup，1000）;

透過使用clearTimeout指定此id ，您可以隨時停止setTimeout處理（很明顯，停止處理了）

 <script>
  var count = 0;
  var countup = function(){
    console.log(count++);
    var id = setTimeout(countup, 1000);
    if(count > 5){　
      clearTimeout(id);　
    }
  }
  countup();
</script>

在上面的程式中，當執行setTimeout的計數且countup變成大於5（if（count> 5））時，執行clearTimeout。

因此，它最多可以計數到5。

JavaScript中的setTimeout如何使用

最後，我們來簡單看一下setInterval計數和使用setTimeout計數之間的差異

##在使用setInterval進行迭代處理的情況下：在從處理起始點開始的一定時間後重複相同的處理

迭代setTimeout時：從處理結束點開始經過一段時間後重複相同的處理

因此，即使你在相同的1000毫秒之後指定時間，開始下一個過程所需的時間也會改變。

此外，如果一個流程所需的時間超過間隔時間，則行為將是有缺陷的。如果你想確保處理和處理之間有一定的餘裕，我們可以使用setTimeout。

以上是JavaScript中的setTimeout如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript if count console

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：JavaScript中的setInterval如何使用下一篇：JavaScript中的setInterval如何使用

看更多