JavaScript中的setTimeout如何使用-js教程-PHP中文網

JavaScript中的setTimeout如何使用

不言

發布： 2018-12-15 09:35:12

原創

6208 人瀏覽過

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

JavaScript中的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如何使用