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

JavaScript で setTimeout を使用する方法

不言

リリース： 2018-12-15 09:35:12

オリジナル

6259 人が閲覧しました

setTimeout は、一定時間後に特定の処理を繰り返し実行することができます。この記事では、setTimeout タイマーの使用方法を説明します。

JavaScript で setTimeout を使用する方法

JavaScript には setInterval と setTimeout という 2 種類のタイミングプロセッサがあることがわかっています。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を基準にして1つずつ数えて足していく(count)後、console.logを使って出力します。そしてこの一連の処理をcountuppの変数に入れます。

この変数 countup count を 1000 ミリ秒後に呼び出したいとします。setTimeout() を追加する必要があります。

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

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

ログイン後にコピー

setTimeout は次のとおりです。 1 回だけ呼び出され、出力 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 を使用する方法