JavaScriptでsetIntervalを使用する方法

不言
リリース: 2018-12-15 09:36:01
オリジナル
8197 人が閲覧しました

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を使用する方法

以上がJavaScriptでsetIntervalを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート