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

JavaScript中的setInterval如何使用

不言
發布: 2018-12-15 09:36:01
原創
8239 人瀏覽過

在瀏覽網頁的時候,你可能會看到幻燈片或圖像和文字定時更改的動態,那麼這種動態效果怎麼實現的呢?其實這可以透過JavaScript的定時器來實現的。

JavaScript中的setInterval如何使用

JavaScript中有兩種類型的計時處理器:setInterval和setImeout。兩者都是非常相似的JavaScript函數,但具體的動作略有不同。

今天我們就來看看setInterval計時器的用法

#setInterval可依照指定的週期(以毫秒計)來進行特定的處理(呼叫函數或計算表達式)。

基本語法如下

setInterval(function函数,固定的时间[,参数1,参数2,参数3,.......])
登入後複製

function是函數的定義,用逗號區分固定的時間(毫秒),function的參數在[ ]中指定。

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

<!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毫秒為週期重複這個變數的計數,需要加入setInterval

程式碼如下

<script>
      var count = 0;
      var countup = function(){
        console.log(count++);
      } 
      setInterval(countup, 1000);
    </script>
登入後複製

運行效果如下:時間會一直走下去的

JavaScript中的setInterval如何使用

如果想要在停止它,們可以使用clearInterval

下面我們來看具體的程式碼

var id = setInterval(countup, 1000);
登入後複製

透過使用clearInterval指定此id ,您可以隨時停止setInterval處理(很明顯,它會停止處理)

 <script>
  var count = 0;
  var countup = function(){
    console.log(count++);
  }
  var id = setInterval(function(){
    countup();
    if(count > 5){ 
      clearInterval(id);
    }}, 1000);
</script>
登入後複製

在上面的程式中,當執行setInterval重複過程並且countup變為大於5(if(count> 5))時,執行clearInterval。

因此,它最多到5,結果如下

JavaScript中的setInterval如何使用

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

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