溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

如何使用JavaScript中的setTimeout

發(fā)布時間:2020-07-15 10:05:32 來源:億速云 閱讀:171 作者:Leah 欄目:web開發(fā)

今天就跟大家聊聊有關如何使用JavaScript中的setTimeout,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。

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

如何使用JavaScript中的setTimeout

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

setTimeout() 是屬于 window 的方法,該方法用于在指定的毫秒數(shù)后調(diào)用函數(shù)或計算表達式。

基本語法如下

setTimeout(function函數(shù),固定的時間[,參數(shù)1,參數(shù)2,參數(shù)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為基準,一個一個地計數(shù)相加(count ++),然后用console.log輸出。并且將這一系列的處理放入countupp的變量中。

假設你想在1000毫秒后調(diào)用這個變量countup計數(shù),需要添加setTimeout()

代碼如下

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

由于setTimeout只調(diào)用一次,因此輸出0并在1000毫秒后完成。

如何使用JavaScript中的setTimeout

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

我們可以在迭代函數(shù)中寫入setTimeout,即{},用countup()調(diào)用它 ;

代碼如下

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

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

運行效果如下:處理類似于setInterval的行為。

如何使用JavaScript中的setTimeout

如果想要停止計數(shù),我們需要使用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>

在上面的程序中,當執(zhí)行setTimeout的計數(shù)并且countup變?yōu)榇笥?(if(count> 5))時,執(zhí)行clearTimeout。

因此,它最多可以計數(shù)到5。

如何使用JavaScript中的setTimeout

最后,我們來簡單看一下setInterval計數(shù)和使用setTimeout計數(shù)之間的區(qū)別

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

迭代setTimeout時:從處理結(jié)束點開始經(jīng)過一段時間后重復相同的處理

因此,即使你在相同的1000毫秒之后指定時間,開始下一個過程所需的時間也會發(fā)生變化。

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

看完上述內(nèi)容,你們對如何使用JavaScript中的setTimeout有進一步的了解嗎?如果還想了解更多知識或者相關內(nèi)容,請關注億速云行業(yè)資訊頻道,感謝大家的支持。

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。

AI