JavaScriptでsetIntervalを使用する方法-jsチュートリアル-php.cn

JavaScriptでsetIntervalを使用する方法

不言

リリース： 2018-12-15 09:36:01

オリジナル

8176 人が閲覧しました

Web を閲覧すると、スライドや画像やテキストの動的な変化が定期的に表示されることがありますが、この動的な効果はどのようにして実現されるのでしょうか。実際、これは JavaScript タイマーを通じて実現できます。

JavaScriptでsetIntervalを使用する方法

JavaScript には、setInterval と setImeout の 2 種類のタイミングプロセッサがあります。どちらも非常によく似た JavaScript 関数ですが、具体的なアクションは少し異なります。

今日は setInterval タイマーの使用法を見ていきます

setInterval指定された期間 (ミリ秒単位) に従って特定の操作を実行できます処理中 (関数の呼び出しまたは式の評価)。

基本的な構文は次のとおりです。

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

ログイン後にコピー

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を基準にして1つずつカウントして加算(count)し、console.logを使って出力します。そしてこの一連の処理をcountuppの変数に入れます。

この変数のカウントを 1000 ミリ秒の周期で繰り返したいとします。setInterval を追加する必要があります。

コードは次のとおりです。

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

ログイン後にコピー

実行時の効果は次のとおりです。次のように: 時間は進み続けます

JavaScriptでsetIntervalを使用する方法

それを止めたい場合は、We は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を使用する方法