• HOME > 
  • JavaScript > 
  • JSのsetTimeoutで指定した時間後に処理を実行させる...

JSのsetTimeoutで指定した時間後に処理を実行させる【キャンセルの方法も】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像
広告
広告

setTimeoutとは?

業務においてJavaScriptを使って時間差で処理を実行させたい場面があり、これまで大まかにしか理解していなかったsetTimeoutとsetIntervalについて勉強し直したので、そのとき学んだ内容を備忘録としてまとめます。

setTimeout()は、指定した時間が経過したら処理を一度だけ実行するといったタイマーのような設定ができる関数です。

下図の例ではユーザーが「ボタンをクリックしてから5秒後」に「要素の色が黒から赤に変わる」ように設定しています。

setTimeoutの例

他にも「ページが読み込まれてから5秒後に…」といったローディング時の処理や「特定の位置までスクロールされてから1秒後に…」というスクロールエフェクトの実装など多くの用途に利用されるメソッドです。

setIntervalとの違い

JavaScriptには同じく時間経過に応じた処理を設定できる「setInterval」メソッドというものも存在します。

この記事でまとめるsetTimeoutが「時間が経過したら一度だけ処理を実行する」のに対し、setIntervalは「指定した時間の間隔おきに繰り返し処理を実行する」という違いがあります。

  • setTimeoutは「時間が経過したら一度だけ処理を実行する」
  • setIntervalは「指定した時間の間隔おきに繰り返し処理を実行する」

setINtervalの場合は「ページが読み込まれてから5秒ごとに…」というように、何度も処理を実行させたい時に使用します。

両者の違いを理解して状況に応じた使い分けが必要です。

setIntervalについてはこちらのページにまとめています。

setTimeoutの使い方

setTimeoutは下記のように引数に実行したい処理(関数)と実行するタイミングをミリ秒で指定して設定します。

setTimeoutの書き方

時間はミリ秒で指定しなければいけないので、1秒であれば「1000」30秒であれば「30000」、1分であれば「60000」になります。

下記の例ではユーザーが「ボタンをクリックしてから2秒後」に「アラートを表示する」ように設定しています。

HTML

<button id="btn_start">チェック</button>

JavaScript

var second = 2000;
var btn_start = document.getElementById("btn_start");
btn_start.addEventListener("click",function(){
    setTimeout(function(){
        alert("「" + (second / 1000) + "」秒経過しました。");
    },second);
});

1行目実行するタイミング(ミリ秒)を変数に入れておきます。

3行目4行目ボタンがクリックされたらsetTimeoutを発火させます。

5行目6行目処理(アラートを表示する)とそれを実行するタイミング(変数second)を指定します。

setTimeoutでアラートを表示する例

setTimeoutをキャンセルする【clearTimeout】

setTimeoutによって実行される処理を止めるには「clearTimeout」を使います。

clearTimeoutの書き方

clearTimeoutを使うには、あらかじめ停止対象のsetTimeoutを変数に入れておく必要があります。

HTML

<button id="btn_start">チェック</button>
<button id="btn_cancel">キャンセル</button>

JavaScript

var second = 2000;
var timer;
var btn_start = document.getElementById("btn_start");
btn_start.addEventListener("click",function(){
    timer = setTimeout(function(){
        alert("「" + (second / 1000) + "」秒経過しました。");
    },second);
});

var btn_cancel = document.getElementById("btn_cancel");
btn_cancel.addEventListener("click",function(){
    clearTimeout(timer);
    alert("タイマーをキャンセルしました。");
});

2行目あらかじめsetTimeoutを入れる変数を宣言しておきます。

5行目setTimeoutを変数に入れます。

12行目キャンセルボタンがクリックされたら、clearTimeoutで処理を停止させます。

clearTimeoutの例

まとめ

以上が、JavaScriptのsetTimeoutで指定した時間後に処理を実行させる方法と、それをclearTimeoutでキャンセルする方法です。

ローディング時やスクロールエフェクトなど用途はとても多いので、setIntervalと合わせて使い方は理解しておきたいですね。

広告
広告

関連する記事

サムネイル

JSで入力値が英数字や半角かどうか即時文字チェックする【ma……

2024年10月02日
JavaScriptのmatch()は、正規表現を使って対象の文字列の中に一致するものがあるか検索できるメソッドです。このページではテキストボックスに入力された文字が数字や半角かどうかチェックする機能をmatchメソッドを使って実装する方法ついてご紹介します。
サムネイル

JSでHTMLのデータ属性を取得・更新する方法【datase……

2024年10月02日
JavaScriptのdatasetで要素のdata属性を操作する JavaScriptのdatasetは、HTML要素に設定されたデータ属性(data-*** […]
サムネイル

JavaScriptでラジオボタンの値(value)を取得す……

2024年10月02日
JSでラジオボタンの値を取得・操作する JavaScriptによるラジオボタンの操作(値の取得やチェックの切り替え)の方法を備忘録として残しておきます。 JSで […]
サムネイル

JSで大文字から小文字(小文字から大文字)へ変換する方法

2024年10月02日
JavaScriptで大文字と小文字を変換する JavaScriptを使った文字検索フォームを作るにあたり、大文字小文字どちらで入力されても良いよう、変換処理を […]
サムネイル

JSのclassList.toggleでクラスの付け外しを行……

2024年09月04日
classList.toggleとは? まず「classList」とは要素のクラス属性の情報を参照するプロパティで、「classList.add()」や「cla […]
サムネイル

JSで要素が特定のクラスを持つか調べる【classList.……

2024年09月04日
JSで要素が特定のクラスを持つか調べるには? JavaScriptで要素が特定のクラスを持つか調べるには「classList.contains」を使います。 「 […]
サムネイル

JSで文字列の中の任意の位置に別の文字を挿入する【slice……

2024年09月04日
JavaScriptに文字列の中の任意の位置に別の文字を挿入するにはslice()メソッドを利用します。sliceは特定の文字列の任意の位置から任意の文字数分を切り出すメソッドで、これを使って対象の文字列を一旦分解し、挿入したい文字と一緒新しい文字列としてくっつけ直します。