インターバル（setInterval）を使ってみる

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

インターバルは一定間隔で、javascriptを実行させるやつ、だったはずです。
実は前々から気になっていたもので、、
今回はそのインターバルを使ってみようと思います。

全く関係のない話

私が初めて触れたプログラミング言語は、BASIC言語です。
こういうjavascriptとか、javaとか,pythonとか,C言語とかに触れて思ったことは、
「あ～、BASIC言語ってほんとに初心者向けだったんだな～」と思いました。

BASIC言語で、配列とか変数とか、関数とか、そういうのを学べたのでとてもよかったですよ。
円周率を計算させたりとか、ゲームも作れましたね。

興味がある方は、ぜひ「Smile basic (プチコン3号)」をやってみてね。
デバイス： DS , 3DS , WiiU , Switch

setInterval の引数と戻り値

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

引数

・ハンドラーには、インターバルで実行させたい、アラー関数や関数が入る。
・時間には、インターバルする時間( ミリ秒単位[ms] )が入る。

setInterval(ハンドラー,時間[ms]);

戻り値

・ハンドル値にはsetIntervalの管理IDみたいなものが入る。IDを使って、インターバルを停止させることもできる。

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

テストコード

次のコードはインターバルを使用して数字を一定間隔で増やしていきます。

let i = 0;
setInterval(function() {
    console.log(i);
    i += 1;
}, 1000);

実行中：

インターバルを停止させる

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

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

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

他の書き方

絶対的　戻り値の利用なし アラー関数
    let i = 0;

    setInterval(function() {
        i += 1;
        console.log(i);
    }, 1000);

解除できる 戻り値の利用 アラー関数
    let i = 0;

    id = setInterval(function() {
        i += 1;
        console.log(i);
    }, 1000);

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

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

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

絶対的　戻り値の利用なし アラー関数（簡易）
    let i = 0;

    setInterval(() => {
        i += 1;
        console.log(i);
    }, 1000);

解除できる 戻り値の利用 アラー関数（簡易）
    let i = 0;

    id = setInterval(() => {
        i += 1;
        console.log(i);
    }, 1000);

clearIntervalで止まるのがわかるサンプル

実行結果：
id： lock：

setInterval

clearInterval

lock が true の時には、setInterval は押しても反応しません。
これは、インターバルの重複を防ぐためです。

＜＜前　：　文字列関連の説明（操作）
＞＞次　：　setTimeoutを使う！