目次

 

はじめに

setTimeout()とsetInterval()は、処理を5秒後に実行したい、〇〇が表示されたら△△、□□の順でループ表示させたい...などWEBページに動きをつけることができるタイマー機能です。
あまり頻繁に使う関数ではないので、久しぶりに使うとどっちがどっち？となることが多いです。それぞれの単語をしっかり読めばtimeoutとintervalなのでどういう機能が想像できますね。
次回、どっちを使えばいいか戸惑うことのないように、こちらのブログに記していきたいと思います。
 

setTimeout関数

setTimeout()は、一定時間後に一度だけ処理を実行する関数です。
引数には、設定した時間に実行したい処理、実行したい時間などを設定します。
例えば、下記のように実装すれば、ページロードの５秒後にdoAction()を実行させることができます。
 
    let doAction = function() {
        // ページロード後、5秒後に実行される処理
    }
    window.addEventListener('load', function () {
        let timer = setTimeout(doAction, 5000);
    })
また、引数を渡すことも可能です。
以下のように設定すれば、ページロードの5秒後に指定した文字列をアラートとして表示させることができます。
 
    let doAction = function(ele) {
        // ページロード後、5秒後に実行される処理
        alert(ele);
    }
    window.addEventListener('load', function () {
        let timer = setTimeout(doAction, 5000, 'hello concrete');
    })

setInterval関数

setInterval()は、指定した時間の間隔で処理を実行する関数です。
setTimeout()と同じように、設定した時間に実行したい処理、時間の間隔を指定します。
例えば、下記のように実装すれば、ページロードの5秒後、１０秒後、１５秒後...と5秒間隔で継続して処理を実行することができます。
 
    let doAction = function() {
        // ページロード後、５秒後、10秒後、15秒後...と一定間隔で実行される
    }
    window.onload = function() {
        let timer = setInterval(doAction, 5000);
    }
また、setTImeout()と同様に、処理に引数を渡すことが可能です。
以下のように設定すれば、指定した文字列をコンソールに5秒間隔で表示させることができます。
 
    let doAction = function(ele) {
        // ページロード後、５秒後、10秒後、15秒後...と一定間隔で実行される
        console.log(ele);
    }
    window.onload = function() {
        let timer = setInterval(doAction, 5000, 'hello concrete');
    }

タイマーをキャンセル

setTimeout()、setInterval()で設定したタイマーを停止することができます。
使用するのは戻り値です。
この戻り値は正の整数値で、setTimeout()、setInterval()のタイマーを識別することができます。
 
setInterval()を例に確認していきましょう。
下記のようにsetInterval()を呼び出した時の戻り値を、clearInterval()に引数として渡してあげます。
5回目で停止したければ、変数 i < 4のように条件をつけてclearInterval()を実行すればいいでしょう。
 
setInterval()の時はclearInterval()、setTimeout()の時はclearTimeout()がそれぞれ該当します。
 
    let timer;
    let i = 1;
    let doAction = function() {
        // ページロード後、５秒後、10秒後、15秒後...と一定間隔で実行される
        if(i > 4) {
            clearInterval(timer);
        }
        i++;
    }
    window.onload = function() {
        timer = setInterval(doAction, 5000);
    }

setTimeout関数でループ処理

setInterval()と同様に、setTimeout()でも一定間隔の処理を実装することが可能です。
それでは、setTimeout()を使って5秒間隔で表示が切り替わる処理を実装していきます。
 
まずは、HTMLです。
今回はdata属性を使い、それぞれ切り替えたいdivタグに1から番号を振っていきます。（e.g. data-slide="1"）
表示したいdivタグには、slide + onクラスがつくような仕様です。
 
<div id="slideList" class="wrap">
    <div data-slide="1" class="slide on">
        <div class="number number01">
            <p>1</p>
        </div>
    </div>
    <div data-slide="2" class="slide">
        <div class="number number02">
            <p>2</p>
        </div>
    </div>
    <div data-slide="3" class="slide">
        <div class="number number03">
            <p>3</p>
        </div>
    </div>
    <div data-slide="4" class="slide">
        <div class="number number04">
            <p>4</p>
        </div>
    </div>
    <div data-slide="5" class="slide">
        <div class="number number05">
            <p>5</p>
        </div>
    </div>
</div>
次にスクリプトを書いていきます。
前述した通り、setTimeout()は、指定した時間が経過した後に処理を実行します。
その為、下記のように「処理の中でその処理を再度呼び出す」という方法を使えば一定間隔で処理を継続して実行することができるようになります。
 
<script>
    let slides = document.querySelectorAll('[data-slide]')
    let slideTotal = slides.length;
    let currentSlide = 2;
    let doSlide = function() {
        let nextSlide = currentSlide + 1;
        if(nextSlide > slideTotal) {
            nextSlide = 1;
        }
        slides.forEach(function(ele) {
            ele.classList.remove('on');
        })
        let whichSlide = document.querySelector('[data-slide="' + currentSlide + '"]');
        whichSlide.classList.add('on');
        currentSlide = nextSlide;
        setTimeout(doSlide, 5000)
    }
    window.addEventListener('load', function () {
        setTimeout(doSlide, 5000);
    })
</script>

Untitled_ Aug 11, 2021 2_20 PM.gif

最後に

処理自体は複雑ではないですが、これで次回使うときに両者を混同しないようにできるかと思います。
MDNに詳しい仕様が記載されているので、確認してみてください。