JavaScriptでsetTimeout()を使う方法

この記事では、JavaScriptのsetTimeout()の使い方について見ていきたいと思います。

setTimeout()とは

setTimeout()は、指定した時間が経過した後に指定した処理を一度だけ実行させることができるメソッドです。

setTimeout()の書き方

setTimeout(コールバック関数, 経過時間)

※経過時間はミリ秒(=1000分の1秒)単位で指定します。

setTimeout()の使用例

一度だけ実行させる

・HTML

<input type="button" id="button" value="ボタン">
<p id="display"></p>

・JavaScript

let button = document.getElementById("button");
let display = document.getElementById("display");

function message() {
  display.textContent = "3秒が経過しました。";
}

button.addEventListener("click", () => {
  setTimeout(message, 3000);
});

ここでは、ボタンをクリックしてから3000ミリ秒(=3秒)後に「3秒が経過しました。」と表示されるという内容になっています。

では実行してみましょう。
「Result」をクリックして、「ボタン」をクリックすると、

こうですね。
ボタンを押してから３秒後に「3秒が経過しました。」と表示されましたね。

繰り返し実行させる

では次にsetTimeout()を繰り返し実行させる方法について見ていきましょう。

・HTML

<input type="button" id="button" value="ボタン">
<p id="display"></p>

・JavaScript

let display = document.getElementById("display");
let i = 1;

function countup() {
  display.textContent = i;
  i++;
  setTimeout(countup, 1000);
}

button.addEventListener("click", () => {
  countup();
});

ここでは、ボタンを押すと関数「countup()」が実行され、ページに数値が表示されたあと、その数値に1を足して、再度1000ミリ秒後に「countup()」が実行されます。
これが繰り返されるというわけですね。

では実行してみましょう。
「Result」をクリックしてボタンを押すと

こうですね。
ちゃんとカウントアップがされていますね。

まとめ

このように、setTimeout()を用いることで指定した時間が経過した後に指定した処理を実行させることができます。