JavaScriptのsetTimeout()入門｜一定時間後に処理を実行する

// 基本構文
const timerId = setTimeout(コールバック関数, 遅延ミリ秒);

// 2秒後にメッセージを表示
setTimeout(() => {
  console.log("2秒経過しました");
}, 2000);

// 即座に実行される（setTimeout内の処理は後で実行）
console.log("先にこちらが表示されます");

// 引数付きのコールバック
setTimeout((name, greeting) => {
  console.log(`${greeting}, ${name}さん！`);
}, 1000, "田中", "こんにちは");

先にこちらが表示されます
// 1秒後:
こんにちは, 田中さん！
// 2秒後:
2秒経過しました

// タイマーのキャンセル
const timerId = setTimeout(() => {
  console.log("この処理は実行されません");
}, 3000);

// タイマーをキャンセル
clearTimeout(timerId);
console.log("タイマーをキャンセルしました");

// デバウンス処理の実装
let debounceTimer;
function handleSearch(query) {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(() => {
    console.log(`検索実行: "${query}"`);
  }, 300);
}

// 高速に入力された場合、最後の入力のみ実行
handleSearch("J");
handleSearch("Ja");
handleSearch("Jav");
handleSearch("Java");
handleSearch("JavaScript"); // この検索のみ実行される

タイマーをキャンセルしました
// 300ms後:
検索実行: "JavaScript"

// 通知の自動消去
function showNotification(message, duration = 3000) {
  console.log(`通知表示: ${message}`);
  setTimeout(() => {
    console.log(`通知消去: ${message}`);
  }, duration);
}
showNotification("保存しました");

// リトライ処理（指数バックオフ）
function fetchWithRetry(url, retries = 3, delay = 1000) {
  return new Promise((resolve, reject) => {
    function attempt(n) {
      console.log(`試行 ${4 - n}/3 (${delay * Math.pow(2, 3 - n)}ms後)`);
      // fetch(url)の代わりにシミュレーション
      const success = n === 1; // 最後の試行で成功
      if (success) {
        resolve("データ取得成功");
      } else if (n > 0) {
        setTimeout(() => attempt(n - 1), delay * Math.pow(2, 3 - n));
      } else {
        reject("全リトライ失敗");
      }
    }
    attempt(retries);
  });
}

// Promiseベースの遅延関数
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function main() {
  console.log("開始");
  await sleep(1000);
  console.log("1秒後");
  await sleep(1000);
  console.log("2秒後");
}
// main(); // 実行例

通知表示: 保存しました
// 3秒後:
通知消去: 保存しました