setTimeout を使う！

記事の作成日　：　2020/03/06

setTimeoutの特性は、「何秒後に関数や、アラー関数を実行させる」というものです。
遅れて実行させることが出来るってことですね。

setTimeoutと似ているのでページも似ています。

全く関係のない話

Q「どんなソフト使ってる？」
A「Visual Studio Code を使っています。拡張性が高く。便利。軽量。」

setTimeout の引数と戻り値

テスト用のファイルで一通り実験してきたので書いていきます。

・ハンドラーには、遅れて実行させたい、アラー関数や関数が入ります。
・時間には、遅延する時間( ミリ秒単位[ms] )が入ります。

setTimeout(ハンドラー,遅延時間[ms]);

・ハンドル値にはsetTimeoutの管理IDみたいなものが入る。IDを使って、遅延中、実行を停止させることもできる。

ハンドル値(HandleNum) = setTimeout(function(){} , 1000)

次のコードは遅延を使用して、ボタンを押した３秒後にアラートを表示します。

setTimeout(() => {
        alert("３秒遅れまして。こんにちは。");
    },3000)

状態：

id = setTimeoutから取得できる専用のIDを使用してclearTimeout(id)で停止させます。

遅延中にclearTimeoutすると、遅延後に
実行するはずだったプログラムが実行されなくなります。

インターバルからIDを取得
id = setTimeout(function(){...},100)

clearTimeoutにIDを入れて停止
clearTimeout( id );

絶対的　戻り値の利用なし アラー関数
    setTimeout(function() {
        console.log("2.5秒遅れ");
    }, 2500);

解除できる 戻り値の利用 アラー関数
    id = setTimeout(function() {
        console.log("1秒遅れ");
    }, 1000);

戻り値の利用無し 関数指定
    setTimeout(Func(), 1000);

解除できる　戻り値の利用 関数指定
    id = setTimeout(Func(), 1000);

◆　アラー関数（簡易）を用いる　◆

絶対的　戻り値の利用なし アラー関数（簡易）
setTimeout(() => {
        console.log("0.5秒遅れ");
    }, 500);

解除できる 戻り値の利用 アラー関数（簡易）
    id = setTimeout(() => {
        console.log("11.5秒遅れ");
    }, 11.5*1000);

実行結果：
id： lock：

setTimeout

clearTimeout

lock が true の時には、setTimeout は押しても反応しません。
これは、遅延の重複を防ぐためです。

前に、setInterval と setTimeout の違いが分らなくて扱ってこなかったですが、
実際に色々いじってみると理解できました。

setInterval：一定間隔で実行
setTimeout：遅延後に実行