setTimeout() - JavaScriptの非同期処理！setTimeout()でタイミング制御

JavaScriptでタイミング制御を行う際によく使用される`setTimeout()`関数について、基本的な使い方から実践的な例まで詳しく解説します。

setTimeout()とは

`setTimeout()`は、指定した時間が経過した後に特定の処理を実行する非同期処理のための関数です。

基本的な構文

setTimeout(function, delay)

• function: 実行したい処理（関数）

• delay: 遅延時間（ミリ秒）

基本的な使用例

setTimeout(() => {
  console.log("3秒後に実行されます");
}, 3000);

アロー関数を使用しない場合

setTimeout(function() {
  console.log("3秒後に実行されます");
}, 3000);

setTimeout()の戻り値とクリア

`setTimeout()`は実行時にタイマーIDを返します。このIDを使用して、`clearTimeout()`でタイマーをキャンセルできます。

const timerId = setTimeout(() => {
  console.log("この処理は実行されません");
}, 3000);

clearTimeout(timerId); // タイマーをキャンセル

よくあるエラーと解決策

1. 遅延時間の単位を間違える

// ❌ 間違った例（秒単位で指定）
setTimeout(function() {
  console.log("3秒後？");
}, 3);

// ✅ 正しい例（ミリ秒単位で指定）
setTimeout(function() {
  console.log("3秒後");
}, 3000);

2. thisの参照先が意図しない場所を指している

// ❌ 問題のあるコード
const obj = {
  name: "テスト",
  greet: function() {
    setTimeout(function() {
      console.log(this.name); // undefined
    }, 1000);
  }
};

// ✅ アロー関数で解決
const obj = {
  name: "テスト",
  greet: function() {
    setTimeout(() => {
      console.log(this.name); // "テスト"
    }, 1000);
  }
};

実践的な使用例

1. ボタンクリック後の遅延処理

const button = document.querySelector('button');

button.addEventListener('click', () => {
  button.disabled = true;
  setTimeout(() => {
    button.disabled = false;
  }, 2000);
});

2. アニメーション効果の実装

function fadeIn(element) {
  let opacity = 0;
  element.style.opacity = opacity;
  
  const timer = setInterval(() => {
    opacity += 0.1;
    element.style.opacity = opacity;
    
    if (opacity >= 1) {
      clearInterval(timer);
    }
  }, 50);
}

注意点

1. JavaScriptはシングルスレッドで動作するため、正確な時間通りに実行されない場合があります。

2. 極端に短い遅延時間（4ms未満）は、ブラウザによって自動的に4msに調整されます。

3. 大量の`setTimeout()`を使用すると、メモリリークの原因となる可能性があります。

まとめ

`setTimeout()`は、JavaScriptで非同期処理を実装する際の基本的な関数です。適切に使用することで、ユーザー体験を向上させるタイミング制御が可能になります。ただし、正確なタイミングが必要な処理には向いていない点に注意が必要です。