jQueryのsetIntervalとclearIntervalの違いは？

Webページに動きを加える際、一定時間ごとに処理を実行したい場合があります。JavaScriptでは、setInterval()関数を使用することでこの動作を実現できます。そして、実行中の繰り返し処理を停止する場合は、clearInterval()関数を用います。今回は、jQueryにおけるsetInterval()とclearInterval()の使い方と違いについて、具体例を交えながら詳しく解説していきます。

setInterval()の使い方

setInterval()関数は、指定した処理を一定間隔で繰り返し実行するための関数です。構文は以下の通りです。


setInterval(function() {
    // 実行したい処理
}, 間隔ミリ秒);

第一引数には、実行したい処理を記述した関数オブジェクト、または関数の名前を指定します。第二引数には、処理を実行する間隔をミリ秒単位で指定します。

使用例：1秒ごとに時刻を表示する


<!DOCTYPE html>
<html>
<head>
    <title>setIntervalの使用例</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            setInterval(function() {
                $('#clock').text(new Date().toLocaleTimeString());
            }, 1000); 
        });
    </script>
</head>
<body>
    <h1>現在の時刻：<span id="clock"></span></h1>
</body>
</html>

このコードでは、1000ミリ秒（1秒）ごとに現在時刻を取得し、HTMLの"clock"というidを持つ要素に表示する処理を行っています。

clearInterval()の使い方

setInterval()関数で設定した繰り返し処理を停止するには、clearInterval()関数を用います。 clearInterval()関数は、停止したいsetInterval()関数の戻り値を引数に指定します。


let intervalId = setInterval(function() {
    // 実行したい処理
}, 間隔ミリ秒);

clearInterval(intervalId);

使用例：5秒後に時刻表示を停止する


<!DOCTYPE html>
<html>
<head>
    <title>clearIntervalの使用例</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            let intervalId = setInterval(function() {
                $('#clock').text(new Date().toLocaleTimeString());
            }, 1000);

            setTimeout(function() {
                clearInterval(intervalId);
            }, 5000);
        });
    </script>
</head>
<body>
    <h1>現在の時刻：<span id="clock"></span></h1>
</body>
</html>

上記の例では、setInterval()で1秒ごとに時刻を表示する処理を開始し、 setTimeout()関数を使って5秒後にclearInterval()を実行することで、時刻表示を停止しています。

setInterval()とclearInterval()の違い

setInterval()とclearInterval()の違いを表にまとめます。

関数名	機能
`setInterval()`	一定間隔で処理を繰り返し実行するタイマーを設定する
`clearInterval()`	`setInterval()`で設定したタイマーを停止する

まとめ

今回は、jQueryにおけるsetInterval()とclearInterval()の使い方と違いについて解説しました。これらの関数を適切に使うことで、動的なWebページを作成することができます。

jQueryのsetIntervalとclearIntervalの違いは？

setInterval()の使い方

使用例：1秒ごとに時刻を表示する

clearInterval()の使い方

使用例：5秒後に時刻表示を停止する

setInterval()とclearInterval()の違い

まとめ

参考資料

関連QA

Q1: setInterval()は正確な時間間隔で処理を実行してくれますか？

Q2: setInterval()で複数の処理を実行したい場合はどうすれば良いですか？

Q3: clearInterval()を呼び出しても処理が停止しない場合はどうすれば良いですか？