JavaScriptでイベントの発火を遅らせる(サンプルあり)

テキスト入力などで入力の途中でも入力された文字でイベントを発生させるこことがよくあります。

例えば検索処理などで検索ボタンを押さなくても入力中に候補を表示してくれるような場合です。

これはKeyUpイベントなどでキーボードの入力を検知してイベントを発火させる仕組みですがこのまま利用すると大量にイベントが発生するためサーバに問い合わせる場合など無駄な負荷がかかってしまいます。

そこで、イベントの発生を抑え、入力後キー入力が１秒途絶えたときにイベントを起動するようにします。

仕組みは以下のようになっていて、タイマーを利用します。
①キーが入力されたらタイマーセットし１秒経過したらイベントを実行します。
②１秒以内にまたキーが入力されたらタイマーを初期化します。そして①を実行します。

以上になります。シンプルですね。

動作のサンプル
コード

動作のサンプル

こちらが動作のサンプルです。キーを入力後１秒間入力がないとイベントが起動してアラートで入力した文字を表示します。

コード

このままテキストに張り付けて実行できます。

<!DOCTYPE html>
<html>
<head>
    <title>キー入力の１秒後にイベントを起動する</title> 
</head>
<body>
  <input type="text" id="textbox" placeholder="ここにテキストを入力してください">
  <script>
  let timer;
  let prevInput = "";

  // イベント作成テキストボックスに入力があったら
  document.getElementById("textbox").addEventListener('keyup', resetTimer);

  function startTimer() {
      // タイマー１秒にセットして開始 
      timer = setTimeout(displayDialog, 1000);
  }

  function resetTimer() {
      // タイマーをリセット
      clearTimeout(timer);
      startTimer();
  }

  function displayDialog() {
      // テキストボックスから現在の値を取得
      var inputText = document.getElementById("textbox").value;

      // 入力値に変化があるかを確認
      if (inputText !== prevInput) {
          // 入力値が変化している場合はダイアログを表示
          alert("入力されたテキストは: " + inputText);
      }

      // 前回の入力値を更新
      prevInput = inputText;
  }
  </script>
</body>
</html>