ユーザー入力の完了を検出して Ajax リクエストを最適化する方法

ユーザー入力完了時の Ajax リクエストの実行

多くのアプリケーションでは、ユーザー入力時にリアルタイムでアクションをトリガーする必要があります。ただし、キーストロークごとにサーバー要求を実行するのは、システムに大量のリクエストが送信され、サーバーに負荷がかかる可能性があるため、非効率的になる可能性があります。これは、検索ボックスの入力など、多数のリクエストが生成される状況に特に当てはまります。

入力完了検出の実装

これに対処する解決策は、ユーザーが ajax リクエストを開始する前に入力を完了したとき。これはタイマーを設定することで実現できます。仕組みは次のとおりです:

1. タイマーの初期化:

   • JavaScript の setTimeout 関数を使用してタイマーを初期化し、その後希望の期間に設定します。アクションがトリガーされます。たとえば、5 秒のタイマーを設定できます。

2. タイマーの開始/リセット:

   • 文字を入力すると (キーアップ イベント)、タイマーがリセットされます。これにより、タイマーが常にキーストロークを監視するようになります。

3. タイマー停止:

   • ユーザーがキーを放したとき (キーダウン イベント)、タイマーをクリアします。これにより、アクションが時期尚早にトリガーされるのを防ぎます。

4. アクションの実行:

   • タイマーが期限切れになったとき (つまり、ユーザーが指定された期間何も入力しなかった場合)、ajax を実行しますrequest.

jQuery を使用したサンプル コード:

var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms, 5 seconds for example
var $input = $('#myInput');

//on keyup, start the countdown
$input.on('keyup', function () {
  clearTimeout(typingTimer);
  typingTimer = setTimeout(doneTyping, doneTypingInterval);
});

//on keydown, clear the countdown 
$input.on('keydown', function () {
  clearTimeout(typingTimer);
});

//user is "finished typing," do something
function doneTyping () {
  //do something, such as execute your ajax request
}

以上がユーザー入力の完了を検出して Ajax リクエストを最適化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。