MENU
  1. ホーム
  2. JS
  3. JavaScript
  4. setTimeout

setTimeout

JavaScript
2024.02.10

setTimeoutは、指定した時間後に一度だけ指定した関数を実行するメソッドです。

setTimeoutの説明図
setTimeout
記法

//　タイマー起動
var 変数名 = setTimeout(関数など, ms秒);
//　タイマー解除
clearTimeout(変数名);

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="main.css" />
    <title>setTimeoutに関して</title>
  </head>

  <body>
    <p id="p">3秒以内にキャンセルするとタイマ起動を阻止できます</p>
    <button id="btn">ボタンクリック</button>
    <button id="cancel_btn" disabled>タイマーキャンセル</button>
    <button id="clear_btn" disabled>クリア</button>
    <script src="main.js"></script>
  </body>
</html>
// 要素を取得
let p = document.getElementById("p");
let btn = document.getElementById("btn");
let cancel_btn = document.getElementById("cancel_btn");
let clear_btn = document.getElementById("clear_btn");

// 1秒ごとにカウントアップする関数
function changeColor() {
  p.style.backgroundColor = "#bfdd9e";
}

// ボタンにクリックイベントリスナー
btn.addEventListener("click", function () {
  //　活性・非活性の制御
  btn.disabled = true;
  cancel_btn.disabled = false;
  clear_btn.disabled = false;

  // 3000ミリ秒（3秒）後にchangeColor関数を実行
  var timer = setTimeout(changeColor, 3000);

  // キャンセルボタンにクリックイベントリスナー
  cancel_btn.addEventListener("click", function () {
    //　活性・非活性の制御
    cancel_btn.disabled = true;
    clearTimeout(timer);
  });

  // クリアボタンにクリックイベントリスナー
  clear_btn.addEventListener("click", function () {
    //　活性・非活性の制御
    btn.disabled = false;
    cancel_btn.disabled = true;
    clear_btn.disabled = true;

    p.style.backgroundColor = "";
  });
});
出力結果

3秒以内にキャンセルするとタイマ起動を阻止できます

JavaScript