首頁 > web前端 > js教程 > JavaScript中的setTimeout如何使用

JavaScript中的setTimeout如何使用

不言
發布: 2018-12-15 09:35:12
原創
6245 人瀏覽過

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

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

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

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

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

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

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板