初心者コーダーのための
HTML/CSS JavaScript PHP WordPress
難しい言葉や概念より、実践重視の入門ブログ
JavaScript

【JavaScript】一定時間毎や一定時間後にイベントを発火させる方法

【JavaScript】時間を操作 一定時間「後」や、一定時間「毎」にイベント発火!

JavaScvriptでは、一定時間「毎」や、一定時間「後」にイベントを発火させることができます。

ここの文字色が1秒ごとに変わるよ!

ページを更新すると1秒後に文字色が変わるよ!

僕自身実際の現場では、一定時間後は使ったことはありません。
一定時間毎も、時刻の表示やカウントアップで使ったことがある程度で、おそらくどちらもさほど登場回数は多くないかと思います。

サンプルコードの使い方

コード右上のアイコンをクリックすることでコピーできます。
全てのサンプルコードは、空のhtmlファイルにコピペするだけで結果を確認することができます。

それでは本文へ、レッツゴー!

一定時間「毎」にイベント発火

setInterval

さて、まずは一定時間毎にイベントを発火させる方法です。
一定時間毎は、setIntervalというものを使います。

setInterval(関数, ミリ秒);

第一引数に関数、第二引数に間隔となるミリ秒を記入することで、「ミリ秒」毎に「関数」を実行するようになります。

1000ミリ秒 = 1秒
なので、1秒毎の場合は1000と記入します。

サンプルコード

1秒毎に文字の色が変わります。

<style>
    .intervalSample{
        transition: color 1s;
    }
    .red{
        color: red;
    }
</style>

<p class="intervalSample">ここの文字色が1秒ごとに変わるよ!</p>

<script>
    const intervalSample = document.querySelector('.intervalSample');

    setInterval(() => {
        if(!intervalSample.classList.contains('red')){
            intervalSample.classList.add('red');
        }else{
            intervalSample.classList.remove('red');
        }
    }, 1000);
</script>

classList.add(.remove)について分からない方はこちら
classList.containについて分からない方はこちら
constについて分からない方はこちら
()=>{}(アロー関数)について分からない方はこちら
ifについて分からない方はこちら

せっかくなので、カウントアップも体験してみましょう!

カウントアップ

0.01秒毎に数を刻んでいき、151になった時点でカウントが止まります。

<p class="countUpArea"></p>

<script>

const countUpArea = document.querySelector('.countUpArea');

const countup = (target, interval, stopNum) => {
    let count = 0;

    const countUpFunc =
        setInterval(() => {
            target.textContent = count;
            count++;

            if(count > stopNum){
                clearInterval(countUpFunc);
            };
        }, interval);
}

countup(countUpArea, 10, 151);

</script>

textContentについて分からない方はこちら

clearIntervalを使うことで、指定のタイミングでsetIntervalを終了させることができます。

一定時間「後」にイベント発火

さて、こちらは実際の現場で使ったことはないのですが、一定時間後にイベントを発火させる方法です。

setTimeout(関数, ミリ秒);

先ほどの一定時間毎と似ていて、第一引数に関数、第二引数に間隔となるミリ秒を記入することで、「ミリ秒」後に「関数」を実行するようになります。

サンプルコード

ウィンドウの読み込みが完了してから、1秒後に文字色が変わります。

<style>
    .timeoutSample{
        transition: color .5s;
    }
</style>

<p class="timeoutSample">ページを更新すると1秒後に文字色が変わるよ!</p>

<script>
    const timeoutSample = document.querySelector('.timeoutSample');

    window.addEventListener('load', ()=>{
        setTimeout(function(){
            timeoutSample.style.color = 'red';
        }, 1000);
    });
</script>