JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

【JavaScript】ユーザーが入力を終了したタイミングで関数を起動する方法

テキスト入力欄で、ユーザーが「入力を終えた」タイミングを検出してJavaScriptの関数を呼び出したいケースはよくあります。しかし、keyupイベントは1文字入力するたびに発生するため、そのままでは「入力の完了」を判定できません。

そこで役立つのがデバウンス（debounce）と呼ばれる手法です。キーが押されるたびにタイマーをリセットし、一定時間入力がなければ「入力が終わった」とみなして関数を実行します。

実装例

<html>
   <body>
      <script>
         var timer = null;
         $("#myText").keydown(function(){
            clearTimeout(timer);
            timer = setTimeout(doStuff, 1000)
         });
         function doStuff() {
            alert("Write more!");
         }
      </script>
      <input type = "text" id = "myText" />
   </body>
</html>

コードの仕組み

  • keydownイベント： ユーザーがキーを押すたびに発生します。
  • clearTimeout(timer)： 直前にセットされたタイマーを解除し、カウントをやり直します。
  • setTimeout(doStuff, 1000)： 1000ミリ秒（1秒）後にdoStuff関数を実行するよう予約します。

ユーザーが連続して入力している間は、キーを押すたびにタイマーがリセットされるためdoStuffは実行されません。最後のキー入力から1秒間何も入力されなかったとき、初めて「入力が終了した」と判断されて関数が呼び出されます。

補足：jQueryを使わずに実装する場合

素のJavaScriptで書く場合は、次のようにinputイベントを利用すると便利です。

let timer = null;

document.getElementById("myText").addEventListener("input", function() {
  clearTimeout(timer);
  timer = setTimeout(function() {
    console.log("入力が完了しました");
  }, 1000);
});

inputイベントはコピー＆ペーストや日本語入力（IME）の確定などにも対応できるため、keydownよりも汎用的に使えます。待ち時間は用途に応じて調整してください。検索ボックスのサジェスト表示などでは、300〜500ミリ秒程度に設定するのが一般的です。

  1. JavaScriptでのメソッド借用：call()・apply()・bind()の使い方を解説

    JavaScriptでは、call()、apply()、bind()という3つのメソッドを使うことで、あるオブジェクトが持つメソッドを別のオブジェクトが「借用」できます。これは、本来そのメソッドを持たないオブジェクトに対して、thisの参照先を差し替えてメソッドを実行できる便利なテクニックです。 3つのメソッドの違い call()：引数をカンマ区切りで個別に渡し、即座に関数を実行します。 apply()：引数を配列（または配列風オブジェクト）として渡し、即座に関数を実行します。 bind()：thisを固定した新しい関数を返すだけで、即座には実行されません。返された関数は後から好きなタイミン

  2. JavaScriptで指定した時刻になったら関数を自動実行する方法

    JavaScriptで「特定の日時に達したら関数を実行したい」というケースでは、目標時刻までの時間差（ミリ秒）を計算し、それを setTimeout() に渡すのが基本のアプローチです。ここでは、その実装手順をサンプルコードとともにわかりやすく解説します。 実装の流れ トリガーしたい日時を Date オブジェクトで作成し、getTime() でミリ秒値に変換します。 現在時刻も同様に getTime() でミリ秒として取得します。 「目標時刻 − 現在時刻」の差分を計算します。これが「あと何ミリ秒で目標時刻になるか」を表します。 差分を setTimeout() の第2引数に渡し、第1引数に