JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのループを停止する方法｜clearInterval()の使い方を解説

JavaScriptでsetInterval()によって繰り返し実行されている処理（ループ）を停止したい場合は、clearInterval()を使用します。

setInterval()は指定した間隔ごとに関数を繰り返し呼び出すメソッドですが、そのままでは無限に処理が続いてしまいます。そこで、あらかじめ戻り値として取得したタイマーIDをclearInterval()に渡すことで、ループを任意のタイミングで止めることができます。

コード例

以下は、一定回数スクロール処理を繰り返した後にループを停止するサンプルコードです。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<link rel="stylesheet"
href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
<script>
   var start = 0;
   var limit = 200;
   var scroll = setInterval(() => this.startScrollDown(), 20);
   function startScrollDown() {
      window.scrollBy(0, 1000);
      console.log(start)
         if (start == limit) clearInterval(scroll);
      start++;
   }
</script>
</html>

コードのポイント

このプログラムでは、変数scrollにsetInterval()の戻り値（タイマーID）を格納しています。20ミリ秒ごとにstartScrollDown()関数が呼び出され、ページを1000ピクセルずつ下にスクロールします。カウンター変数startがlimit（200回）に達すると、clearInterval(scroll)が実行されてループが停止します。

実行方法

上記のプログラムを実行するには、ファイル名を「anyName.html」や「index.html」などとして保存します。その後、VS Codeエディター上でファイルを右クリックし、「Open with Live Server」を選択してブラウザーで開いてください。

実行結果

実行すると、以下のような出力が得られます。コンソールには0から199までの数値が順番に出力され、200回目に達した時点でループが終了します。

JavaScriptのループを停止する方法｜clearInterval()の使い方を解説

  1. JavaScriptオブジェクトの内容を文字列として表示する方法

    JavaScriptでオブジェクトの内容を文字列形式で画面に表示したい場合、document.getElementById()でHTML要素を取得し、innerHTMLを使って書き出すのが基本的な方法です。オブジェクトを文字列に変換するには、JSON.stringify()メソッドを活用します。 実装手順 まず、表示先となるHTML要素にIDを設定します。次に、JavaScript側でそのIDを指定して要素を取得し、変換した文字列をinnerHTMLに代入します。 コード例 <!DOCTYPE html> <html lang="ja"> <h

  2. 【JavaScript】ドキュメント全体のHTMLを文字列として取得する方法を解説

    Webページのソースコード全体を取得して処理したい場面は、デバッグや動的なコンテンツ操作など、JavaScript開発では意外と多くあります。この記事では、ドキュメント全体のHTMLを文字列として取得する方法を、具体的なコード例とともにわかりやすく解説します。 innerHTMLプロパティを使った取得方法 ドキュメント全体のHTMLを文字列として取得するには、document.documentElementのinnerHTMLプロパティを利用します。 document.documentElement.innerHTML; document.documentElementはHTML文書のルート要