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

JavaScriptで実行中の関数を停止するにはどうすればいい？addEventListenerとclearIntervalの使い方を解説

JavaScriptでは、一度実行が始まった関数を外部から直接強制終了することはできません。しかし、setInterval()で定期実行されている処理であれば、clearInterval()を使うことで停止できます。ボタンのクリックイベントは、document.getElementById().addEventListener()で登録します。

実装のポイント

この仕組みを実現するには、以下の手順に従います。

  • 関数を開始するボタン：クリックされるとsetInterval()を呼び出し、戻り値（タイマーID）を変数に保存します。
  • 関数を停止するボタン：クリックされると保存しておいたタイマーIDをclearInterval()に渡し、繰り返し処理を解除します。

タイマーIDを変数に保持しておくことが重要です。これがないと、後からどのタイマーを止めるべきか判別できなくなります。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<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>
</head>
<body>
<button type="button" id="call">関数を呼び出す</button>
<button type="button" id="halt">関数の実行を停止する</button>
<script>
    document.getElementById("call").addEventListener("click", callFunction);
    document.getElementById("halt").addEventListener("click", haltFunction);
    var timeValue = null;
    function callFunction() {
        timeValue = setInterval(function() {
            console.log("call() が実行されています....");
        }, 1000);
    }
    function haltFunction() {
        clearInterval(timeValue);
    }
</script>
</body>
</html>

プログラムの実行方法

上記のコードをanyName.html（index.html）などの名前で保存し、VS Codeの場合はファイルを右クリックして「Open with Live Server」を選択すると、ブラウザ上で実行できます。

動作確認

JavaScriptで実行中の関数を停止するにはどうすればいい？addEventListenerとclearIntervalの使い方を解説

「関数を呼び出す」ボタンをクリックすると、1秒ごとに関数が実行され、コンソールにメッセージが出力され続けます。

次に、「関数の実行を停止する」ボタンをクリックしてください。clearInterval()が働き、繰り返し処理が停止します。

実際の動作画面は以下のようになります。

JavaScriptで実行中の関数を停止するにはどうすればいい？addEventListenerとclearIntervalの使い方を解説

補足：setTimeoutとの違い

なお、一定時間後に一度だけ処理を実行したい場合はsetTimeout()を使用し、その場合は対応するclearTimeout()でキャンセルできます。用途に応じて両者を使い分けると、より柔軟な非同期処理が実現できます。

  1. JavaScriptで関数の実行を停止する方法｜clearTimeout()メソッドの使い方

    JavaScriptで関数の実行を停止するには、clearTimeout()メソッドを使用します。このメソッドは、setTimeout()関数によって設定されたタイマーを解除し、まだ実行されていない処理が呼び出されるのをキャンセルします。 clearTimeout()メソッドの基本 setTimeout()は、指定した時間の経過後に関数を一度だけ実行するメソッドで、呼び出し時に一意のタイマーIDを返します。clearTimeout()にこのIDを渡すことで、実行待ちの処理を取り消すことができます。 サンプルコード 以下のコードを実行して、JavaScriptにおけるclearTimeout()

  2. JavaScriptでフォームの送信をキャンセルする方法｜preventDefaultとreturn falseの使い方を解説

    JavaScriptでは、onsubmitイベントの戻り値やevent.preventDefault()メソッドを利用することで、フォームの送信処理を自由に制御できます。バリデーション（入力チェック）に失敗した場合に送信を中断したいときなどに、このテクニックが役立ちます。event.preventDefault()を使って送信を止める最も一般的な方法は、フォームのonsubmit属性内でevent.preventDefault()を呼び出すことです。これにより、ブラウザ本来の送信動作（ページ遷移）がキャンセルされます。<form onsubmit=event.preventDefault