JavaScriptにおけるsetTimeoutの使い方と効果的な活用方法12選

●setTimeoutとは？
●setTimeoutを使った遅延実行
- ○サンプルコード3：複数の処理を順番に遅延実行する
- ○サンプルコード4：ユーザーアクションに応じて遅延実行する
●setTimeoutとsetIntervalの違い
- ○サンプルコード5：setIntervalを使った繰り返し処理
- ○setTimeoutとsetIntervalの使い分け
●setTimeoutを使ったアニメーション
- ○サンプルコード6：要素をスライドインさせるアニメーション
- ○サンプルコード7：テキストを1文字ずつ表示するアニメーション
●setTimeoutと非同期処理
- ○サンプルコード8：APIリクエストの結果を遅延処理する
- ○サンプルコード9：複数の非同期処理を制御する
●setTimeoutのよくあるエラーと対処法
●setTimeoutの応用例
まとめ

●setTimeoutとは？

JavaScriptには、「setTimeout」という便利な機能があります。

setTimeoutを使うと、指定した時間が経過した後に、特定の処理を実行することができるのです。

これは、Webサイトやアプリケーションを作る上で、とても重要な機能だと言えるでしょう。

なぜなら、ユーザーの操作に応じて、適切なタイミングで処理を行うことが求められるからです。

例えば、ユーザーがボタンをクリックしてから3秒後に、ポップアップを表示させたいとします。

この場合、setTimeoutを使えば、ボタンがクリックされてから3秒後に、ポップアップを表示するコードを実行できます。

このように、setTimeoutを使いこなせば、Webサイトやアプリケーションに、より豊かな表現力を持たせることができるのです。

これから、setTimeoutの使い方を詳しく見ていきましょう。

○setTimeoutの基本的な使い方

setTimeoutの基本的な使い方は、次のようになります。

setTimeout(コールバック関数, ミリ秒);

第1引数には、指定した時間が経過した後に実行したい処理を、関数として渡します。

これを「コールバック関数」と呼びます。

第2引数には、コールバック関数を実行するまでの時間を、ミリ秒単位で指定します。

例えば、1000と指定すれば、1秒後にコールバック関数が実行されます。

実際に、コードを見てみましょう。

○サンプルコード1：一定時間後にアラートを表示する

setTimeout(function() {
  alert("こんにちは！");
}, 3000);

このコードでは、setTimeoutの第1引数に、アラートを表示する無名関数を渡しています。

第2引数には、3000を指定しているので、3秒後に「こんにちは！」というアラートが表示されます。

setTimeoutを使う際は、このように、コールバック関数とミリ秒を指定するだけです。

とてもシンプルですね。

でも、これだけではsetTimeoutの本当の力を感じられないかもしれません。

次の例を見てみましょう。

○サンプルコード2：一定時間後に要素のスタイルを変更する

<button id="myButton">クリックしてね</button>

<script>
document.getElementById("myButton").addEventListener("click", function() {
  setTimeout(function() {
    document.getElementById("myButton").style.backgroundColor = "red";
  }, 2000);
});
</script>

このコードでは、ボタンがクリックされてから2秒後に、ボタンの背景色を赤に変更しています。

コードを詳しく見ていきましょう。まず、ボタンを取得するためにdocument.getElementById("myButton")を使っています。

そして、addEventListenerを使って、ボタンがクリックされた時の処理を登録しています。

クリックされた時の処理の中で、setTimeoutを使っています。

コールバック関数の中では、再度document.getElementByIdを使ってボタンを取得し、style.backgroundColorでボタンの背景色を変更しています。

●setTimeoutを使った遅延実行

さて、setTimeoutの基本的な使い方は理解できましたね。

でも、実際の開発では、もっと複雑な処理を扱うことが多いのです。

例えば、ある処理を実行した後に、少し時間をおいて別の処理を実行したい場合があります。

こんな時は、setTimeoutを使った遅延実行が活躍します。

遅延実行を使えば、処理を順番に実行しつつ、その間に一定の時間間隔を設けることができるのです。

Webサイトやアプリケーションに、自然なリズムを生み出すことができるでしょう。

それでは、具体的なコードを見ていきましょう。きっと、setTimeoutの可能性が見えてくるはずです。

○サンプルコード3：複数の処理を順番に遅延実行する

console.log("処理1を実行します");

setTimeout(function() {
  console.log("処理2を実行します");

  setTimeout(function() {
    console.log("処理3を実行します");
  }, 2000);
}, 1000);

このコードでは、3つの処理を順番に実行しています。

ただし、それぞれの処理の間に、setTimeoutを使って時間差を設けているのがポイントです。

最初に、「処理1を実行します」とコンソールに出力しています。

次に、setTimeoutを使って1秒(1000ミリ秒)待ち、「処理2を実行します」と出力しています。

さらに、処理2の中で再度setTimeoutを使い、2秒(2000ミリ秒)待ってから、「処理3を実行します」と出力しています。

実行結果

処理1を実行します
(1秒後)
処理2を実行します 
(さらに2秒後)
処理3を実行します

このように、setTimeoutをネストさせることで、複数の処理を時間差で順番に実行できるのです。

処理の順序を制御しつつ、ゆったりとしたペースで処理を進めることができます。

○サンプルコード4：ユーザーアクションに応じて遅延実行する

<button id="myButton">クリックしてね</button>
<div id="message"></div>

<script>
document.getElementById("myButton").addEventListener("click", function() {
  document.getElementById("message").textContent = "ボタンがクリックされました";

  setTimeout(function() {
    document.getElementById("message").textContent = "3秒が経過しました";
  }, 3000);
});
</script>

このコードは、ボタンをクリックすると、まずメッセージを表示し、その3秒後に別のメッセージを表示するという処理です。

ボタンがクリックされると、id="message"の要素に「ボタンがクリックされました」というテキストを表示しています。

そして、setTimeoutを使って3秒待ち、同じ要素のテキストを「3秒が経過しました」に変更しています。

●setTimeoutとsetIntervalの違い

さて、ここまでsetTimeoutを使った遅延実行について見てきましたが、JavaScriptには、setTimeoutと似たような機能を持つ「setInterval」という関数もあるのをご存知でしょうか。

一見、setTimeoutとsetIntervalは同じように見えるかもしれません。

でも、実は両者には大きな違いがあるのです。

その違いを理解することは、より効果的にタイマー処理を活用する上で欠かせません。

混同して使ってしまうと、思わぬバグを生み出してしまうかもしれないのです。

それでは、setTimeoutとsetIntervalの違いについて、詳しく見ていきましょう。

きっと、JavaScriptのタイマー処理に対する理解が深まるはずです。

○サンプルコード5：setIntervalを使った繰り返し処理

let count = 0;

const intervalId = setInterval(function() {
  console.log(count);
  count++;

  if (count === 5) {
    clearInterval(intervalId);
  }
}, 1000);

このコードでは、setIntervalを使って、1秒ごとにカウントアップする処理を実装しています。

setIntervalは、指定した時間間隔で、コールバック関数を繰り返し実行する関数です。

この例では、1秒(1000ミリ秒)ごとに、コールバック関数が実行されます。

コールバック関数の中では、まず現在のカウント数をコンソールに出力しています。

そして、カウント数を1つインクリメントしています。

さらに、if文を使って、カウント数が5になったら、clearIntervalを呼び出して、setIntervalをキャンセルしています。

これにより、カウント数が5になった時点で、処理が終了します。

実行結果

このように、setIntervalを使えば、一定時間ごとに処理を繰り返すことができます。

Webサイトやアプリケーションで、定期的に情報を更新したい場合などに活用できるでしょう。

○setTimeoutとsetIntervalの使い分け

さて、setTimeoutとsetIntervalの違いが見えてきましたね。

setTimeoutは、指定した時間が経過した後に、一度だけコールバック関数を実行します。

一方、setIntervalは、指定した時間間隔で、コールバック関数を繰り返し実行し続けます。

つまり、一度だけ処理を遅延させたい場合はsetTimeoutを、定期的に処理を繰り返したい場合はsetIntervalを使うのが基本的な使い分けになります。

ただし、setIntervalを使う際は注意が必要です。

コールバック関数の実行に時間がかかる場合、setIntervalの時間間隔が狂ってしまう可能性があるのです。

例えば、1秒ごとに処理を実行したいが、コールバック関数の実行に2秒かかってしまったとします。

すると、次の処理はすぐに実行されてしまい、結果的に1秒ごとではなくなってしまうのです。

このような場合は、setTimeoutを使って、再帰的に処理を呼び出すのがよいでしょう。

function repeatProcess() {
  // 処理を実行
  // ...

  setTimeout(repeatProcess, 1000);
}

repeatProcess();

このように、setTimeoutの中で自分自身の関数を呼び出すことで、setIntervalのように一定時間ごとに処理を実行しつつ、コールバック関数の実行時間による影響を受けないようにできます。

さて、ここまででsetTimeoutとsetIntervalの違いについて理解が深まったと思います。

両者の特性を理解し、適切に使い分けることが、より洗練されたJavaScriptのコードを書く上で重要なのです。

●setTimeoutを使ったアニメーション

さて、setTimeoutを使った遅延実行やsetIntervalとの違いについて理解が深まったところで、今度はsetTimeoutを使ったアニメーションについて見ていきましょう。

アニメーションと聞くと、なんだか難しそうに感じるかもしれません。

でも、setTimeoutを使えば、意外と簡単にアニメーションを実装できるのです。

Webサイトやアプリケーションに、ちょっとした動きを加えるだけで、ユーザーの印象はがらりと変わります。

より洗練された、インタラクティブなUIを実現できるでしょう。

それでは、実際にsetTimeoutを使ったアニメーションの例を見ていきましょう。

きっと、JavaScriptの新たな可能性が見えてくるはずです。

○サンプルコード6：要素をスライドインさせるアニメーション

<div id="box">Hello, World!</div>

<style>
#box {
  width: 200px;
  height: 200px;
  background-color: #f0f0f0;
  position: relative;
  left: -200px;
}
</style>

<script>
function slideIn(element, distance, duration) {
  let start = performance.now();

  function step() {
    let elapsed = performance.now() - start;
    let progress = elapsed / duration;
    progress = Math.min(progress, 1);

    element.style.left = distance * progress + 'px';

    if (progress < 1) {
      setTimeout(step, 16);
    }
  }

  setTimeout(step, 16);
}

slideIn(document.getElementById('box'), 200, 1000);
</script>

このコードでは、setTimeoutを使って、要素をスライドインさせるアニメーションを実装しています。

まず、HTMLとCSSで、アニメーションさせる要素を定義しています。

<div>要素にid="box"を設定し、CSSでは幅と高さ、背景色、初期位置を指定しています。

JavaScriptのコードを見ていきましょう。slideIn関数を定義しています。

この関数は、アニメーションさせる要素、移動距離、アニメーション時間をパラメータとして受け取ります。

関数内では、まずperformance.now()を使って、アニメーション開始時間を記録しています。

次に、step関数を定義しています。

この関数は、アニメーションの各フレームで呼び出されます。

step関数内では、経過時間を計算し、進捗率を求めています。

進捗率は0から1の範囲に収まるように調整しています。

そして、進捗率に基づいて、要素の位置を更新しています。

element.style.leftに、移動距離と進捗率を掛けた値を設定することで、要素を移動させています。

最後に、進捗率が1未満の場合、setTimeoutを使って16ミリ秒後にstep関数を再度呼び出しています。

これにより、アニメーションが継続します。

slideIn関数の最後では、setTimeoutを使って、16ミリ秒後に最初のstep関数を呼び出しています。これがアニメーションのスタートになります。

○サンプルコード7：テキストを1文字ずつ表示するアニメーション

<div id="text"></div>

<script>
function typeWriter(element, text, speed) {
  let i = 0;

  function type() {
    if (i < text.length) {
      element.innerHTML += text.charAt(i);
      i++;
      setTimeout(type, speed);
    }
  }

  setTimeout(type, speed);
}

typeWriter(document.getElementById('text'), 'Hello, World!', 100);
</script>

このコードでは、setTimeoutを使って、テキストを1文字ずつ表示するタイプライター風のアニメーションを実装しています。

typeWriter関数を定義しています。

この関数は、テキストを表示する要素、表示するテキスト、表示速度をパラメータとして受け取ります。

関数内では、まずi変数を0で初期化しています。

この変数は、現在表示している文字のインデックスを表します。

次に、type関数を定義しています。

この関数は、1文字ずつテキストを表示する処理を行います。

type関数内では、iがtextの長さより小さい場合、textのi番目の文字をelementのinnerHTMLに追加しています。

そして、iをインクリメントし、setTimeoutを使ってspeedミリ秒後にtype関数を再度呼び出しています。

typeWriter関数の最後では、setTimeoutを使って、speedミリ秒後に最初のtype関数を呼び出しています。

これがアニメーションのスタートになります。

●setTimeoutと非同期処理

JavaScriptを使ったWeb開発において、非同期処理は欠かせない概念です。

サーバーとのデータのやり取りや、時間のかかる処理を行う際に、非同期処理を使わないと、処理が完了するまでユーザーインターフェースがフリーズしてしまうことがあるのです。

そんな非同期処理を実現する上で、setTimeoutは重要な役割を果たします。

setTimeoutを使えば、処理を遅延させることで、非同期的な動作を実現できるのです。

でも、非同期処理とsetTimeoutの関係は、一見わかりにくいかもしれません。

コールバック関数や、処理の実行順序など、複雑な概念が絡んでくるからです。

しかし、これらの概念を理解することは、より高度なJavaScriptのプログラミングを行う上で欠かせません。

非同期処理を使いこなせれば、ユーザーエクスペリエンスを大きく向上させられるでしょう。

それでは、実際のコード例を見ながら、setTimeoutと非同期処理の関係について詳しく見ていきましょう。

○サンプルコード8：APIリクエストの結果を遅延処理する

function fetchData(callback) {
  // APIリクエストを送信する
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
      // 取得したデータを遅延処理する
      setTimeout(() => {
        callback(data);
      }, 1000);
    });
}

function displayData(data) {
  console.log(data);
}

fetchData(displayData);

このコードでは、fetchData関数の中で、fetchを使ってAPIリクエストを送信しています。

APIから取得したデータは、thenメソッドを使って処理されます。

ここで注目したいのは、取得したデータを直接callback関数に渡すのではなく、setTimeoutを使って1秒(1000ミリ秒)遅らせてからcallback関数を呼び出しているところです。

これにより、データの取得と表示の間に遅延を設けることができます。

APIリクエストが完了してもすぐにデータが表示されるのではなく、1秒後にデータが表示されるようになるのです。

実行結果

(1秒後に取得したデータが表示される)

このように、setTimeoutを使って処理を遅延させることで、非同期的な動作を実現できます。

APIリクエストのようにサーバーとの通信が必要な処理は、必然的に時間がかかります。

そのような処理をセットで扱う際に、setTimeoutは大きな役割を果たすのです。

○サンプルコード9：複数の非同期処理を制御する

function asyncTask1(callback) {
  setTimeout(() => {
    console.log('タスク1完了');
    callback();
  }, 1000);
}

function asyncTask2(callback) {
  setTimeout(() => {
    console.log('タスク2完了');
    callback();
  }, 500);
}

function asyncTask3(callback) {
  setTimeout(() => {
    console.log('タスク3完了');
    callback();
  }, 2000);
}

function runAsyncTasks() {
  asyncTask1(() => {
    asyncTask2(() => {
      asyncTask3(() => {
        console.log('すべてのタスクが完了しました');
      });
    });
  });
}

runAsyncTasks();

このコードでは、asyncTask1、asyncTask2、asyncTask3という3つの非同期タスクを定義しています。

それぞれのタスクは、setTimeoutを使って異なる遅延時間を設定しています。

runAsyncTasks関数の中で、これらのタスクを順番に実行しています。

注目したいのは、各タスクの完了時に、コールバック関数を使って次のタスクを呼び出しているところです。

これにより、タスク1が完了してからタスク2が実行され、タスク2が完了してからタスク3が実行されるという流れを作ることができます。

すべてのタスクが完了すると、最後に「すべてのタスクが完了しました」というメッセージが表示されます。

実行結果

(1秒後)
タスク1完了
(0.5秒後)
タスク2完了
(2秒後)
タスク3完了
すべてのタスクが完了しました

このように、setTimeoutとコールバック関数を組み合わせることで、複数の非同期処理を制御できます。

処理の順序を制御しつつ、非同期的な動作を実現できるのです。

ただ、このようなコールバック関数の多用は、いわゆる「コールバック地獄」と呼ばれる状態を引き起こすことがあります。

コードの可読性が下がり、維持管理が難しくなってしまうのです。

●setTimeoutのよくあるエラーと対処法

setTimeoutは非常に便利な機能ですが、使い方を間違えると、思わぬエラーに遭遇することがあります。

特に、JavaScriptの非同期処理やスコープの概念に慣れていないと、戸惑ってしまうかもしれません。

でも、大丈夫です。

よくあるエラーを知っておけば、それらを回避することができます。

エラーに立ち向かう勇気を持って、setTimeoutを使いこなしていきましょう。

ここでは、setTimeoutを使う際によく遭遇するエラーと、その対処法について見ていきます。

これらを理解することで、より堅牢なコードを書けるようになるはずです。

○エラー1：コールバック関数内でthisが期待通りに動作しない

setTimeoutのコールバック関数内でthisを使うと、期待通りに動作しないことがあります。

これは、コールバック関数が呼び出される際のthisの値が、setTimeoutを呼び出した時点でのthisとは異なるためです。

例えば、次のようなコードを考えてみましょう。

const obj = {
  name: 'John',
  greet: function() {
    setTimeout(function() {
      console.log('Hello, ' + this.name);
    }, 1000);
  }
};

obj.greet();

このコードでは、objオブジェクトのgreetメソッドの中でsetTimeoutを使っています。

コールバック関数内でthis.nameを使って、objのnameプロパティにアクセスしようとしています。

しかし、実行結果は次のようになります。

Hello, undefined

this.nameがundefinedになってしまいました。

これは、コールバック関数内のthisが、objオブジェクトを参照していないためです。

この問題を解決するには、いくつかの方法があります。

一つは、bindメソッドを使って、コールバック関数のthisを明示的に指定する方法です。

setTimeout(function() {
  console.log('Hello, ' + this.name);
}.bind(this), 1000);

もう一つの方法は、アロー関数を使う方法です。

アロー関数は、自身のthisを持たず、周囲のスコープのthisを引き継ぐという特徴があります。

setTimeout(() => {
  console.log('Hello, ' + this.name);
}, 1000);

このように、thisの値に注意することで、コールバック関数内で期待通りの動作をさせることができます。

○エラー2：setTimeoutがすぐに実行されてしまう

setTimeoutに渡すコールバック関数を、関数呼び出しの形で渡してしまうと、setTimeoutがすぐに実行されてしまうというエラーが起こります。

例えば、次のようなコードを考えてみましょう。

function greet() {
  console.log('Hello');
}

setTimeout(greet(), 1000);

このコードの意図は、1秒後にgreet関数を実行することです。

しかし、実際にはgreet関数がすぐに実行されてしまい、1秒後には何も起こりません。

これは、setTimeout(greet(), 1000)という記述が、greet関数を呼び出した結果をsetTimeoutに渡しているためです。

正しくは、関数そのものを渡す必要があります。

setTimeout(greet, 1000);

このように、関数名だけを渡すことで、1秒後にgreet関数が実行されるようになります。

関数呼び出しの形で渡してしまうというミスは、意外と起こりやすいものです。

setTimeoutに渡す関数は、呼び出し括弧をつけずに渡すことを意識しましょう。

○エラー3：setTimeoutがクリアされない

setTimeoutをクリアするには、clearTimeout関数を使います。

この関数に、クリアしたいsetTimeoutの返り値を渡す必要があります。

しかし、この返り値を保持していないと、setTimeoutをクリアすることができません。

function startTimer() {
  setTimeout(function() {
    console.log('タイマーが終了しました');
  }, 1000);
}

function stopTimer() {
  // タイマーをクリアしたいが、返り値を保持していない
  clearTimeout(???);
}

この問題を解決するには、setTimeoutの返り値を変数に保持しておく必要があります。

let timerId;

function startTimer() {
  timerId = setTimeout(function() {
    console.log('タイマーが終了しました');
  }, 1000);
}

function stopTimer() {
  clearTimeout(timerId);
}

このように、timerId変数にsetTimeoutの返り値を代入しておくことで、stopTimer関数の中でclearTimeoutを使ってタイマーをクリアすることができます。

setTimeoutをクリアする必要がある場合は、返り値を保持しておくことを忘れないようにしましょう。

さて、ここまででsetTimeoutを使う際のよくあるエラーと対処法について見てきました。

thisの値や関数の渡し方、タイマーのクリアなど、ちょっとしたことに気をつけるだけで、エラーを回避することができます。

●setTimeoutの応用例

さて、ここまででsetTimeoutの基本的な使い方や注意点について理解が深まったところで、今度はsetTimeoutを使ったより実践的な例を見ていきましょう。

Webサイトやアプリケーションを開発する上で、setTimeoutは実に様々な場面で活躍します。

タイマー処理やユーザーインタラクション、パフォーマンス最適化など、setTimeoutを使いこなすことで、より洗練されたユーザーエクスペリエンスを提供できるでしょう。

ここからは、setTimeoutを使った具体的な応用例を見ていきます。

実際のコードを通じて、setTimeoutの活用方法を学んでいきましょう。

きっと、あなたのJavaScriptの引き出しが大きく広がるはずです。

○サンプルコード10：カウントダウンタイマーを作成する

<div id="timer">10</div>

<script>
let count = 10;
const timerElement = document.getElementById('timer');

function countDown() {
  timerElement.textContent = count;
  count--;

  if (count >= 0) {
    setTimeout(countDown, 1000);
  } else {
    timerElement.textContent = 'タイムアップ！';
  }
}

setTimeout(countDown, 1000);
</script>

このコードでは、setTimeoutを使ってカウントダウンタイマーを実装しています。

まず、HTMLでタイマーを表示する要素を定義しています。

<div id="timer">10</div>という要素に、初期値の10が表示されます。

JavaScriptでは、まずcount変数を10で初期化し、timerElement変数にタイマー要素への参照を代入しています。

次に、countDown関数を定義しています。

この関数が、カウントダウンの主要な処理を行います。

countDown関数の中では、まずタイマー要素に現在のcountの値を表示しています。

そして、countの値を1減らします。

その後、if文でcountの値が0以上かどうかを判定しています。

0以上の場合は、setTimeoutを使って1秒(1000ミリ秒)後にcountDown関数を再度呼び出しています。

これにより、1秒ごとにカウントダウンが進むようになります。

countの値が0未満になった場合は、タイマー要素に「タイムアップ！」と表示します。

最後に、setTimeoutを使って、1秒後に最初のcountDown関数を呼び出しています。

これがカウントダウンのスタートになります。

○サンプルコード11：オートセーブ機能を実装する

let dirty = false;
let saveTimer;

function startSaveTimer() {
  dirty = true;
  clearTimeout(saveTimer);
  saveTimer = setTimeout(saveData, 5000);
}

function saveData() {
  if (dirty) {
    console.log('データを保存しました');
    dirty = false;
  }
}

// ユーザーが何か操作をしたとき
document.addEventListener('change', startSaveTimer);

このコードでは、setTimeoutを使ってオートセーブ機能を実装しています。

まず、dirty変数をfalseで初期化しています。

この変数は、データが変更されたかどうかを表すフラグとして使います。

次に、saveTimer変数を定義しています。

この変数は、setTimeoutの返り値を保持するために使います。

startSaveTimer関数は、ユーザーがデータを変更したときに呼び出されます。

この関数の中で、dirtyフラグをtrueに設定し、clearTimeoutを使って既存のタイマーをクリアしてから、新しいタイマーを設定しています。

ここでは、5秒(5000ミリ秒)後にsaveData関数を呼び出すようにしています。

saveData関数は、実際にデータを保存する処理を行います。

dirtyフラグがtrueの場合のみ、データを保存し、dirtyフラグをfalseに戻します。

最後に、addEventListenerを使って、ユーザーの操作を監視しています。

ここでは、changeイベントが発生したときにstartSaveTimer関数を呼び出すようにしています。

○サンプルコード12：ユーザーの操作を一時的にブロックする

let isBlocked = false;

function blockUser() {
  if (!isBlocked) {
    isBlocked = true;
    console.log('ユーザーの操作をブロックしました');
    setTimeout(unblockUser, 3000);
  }
}

function unblockUser() {
  isBlocked = false;
  console.log('ユーザーの操作のブロックを解除しました');
}

// ユーザーが何か操作をしたとき
document.addEventListener('click', function() {
  if (!isBlocked) {
    console.log('ユーザーが操作しました');
    blockUser();
  } else {
    console.log('ユーザーの操作はブロックされています');
  }
});

このコードでは、setTimeoutを使ってユーザーの操作を一時的にブロックする機能を実装しています。

まず、isBlocked変数をfalseで初期化しています。

この変数は、ユーザーの操作がブロックされているかどうかを表すフラグとして使います。

次に、blockUser関数を定義しています。

この関数は、ユーザーの操作をブロックする処理を行います。

isBlockedフラグがfalseの場合のみ、isBlockedフラグをtrueに設定し、コンソールにメッセージを表示します。

そして、setTimeoutを使って3秒(3000ミリ秒)後にunblockUser関数を呼び出すようにしています。

unblockUser関数は、ユーザーの操作のブロックを解除する処理を行います。

isBlockedフラグをfalseに戻し、コンソールにメッセージを表示します。

最後に、addEventListenerを使って、ユーザーのクリック操作を監視しています。

クリックイベントが発生したときに、isBlockedフラグを確認します。

isBlockedがfalseの場合は、ユーザーの操作を処理し、blockUser関数を呼び出してユーザーの操作をブロックします。