入力ごとのajax呼び出しを制限する

debugcn 投稿 Dev

Whisou138

入力が変更されるたびにエンドポイントに値を送信する、動作中のajax呼び出しがあります。したがって、ユーザーが入力している場合は、キーストロークごとに呼び出しを送信します。

setTimeoutを2秒間配置しました。これにより、呼び出しが問題なく遅延します。しかし、問題は、それでもすべてのキーストロークに対して呼び出しを送信することです。

2秒後に、これまでに入力されたものの呼び出しを送信する場所に到達したいと思います。ユーザーがもう一度入力を開始すると、おそらく再び設定されます。

私は、送信するキーストロークを減らして、ユーザーが入力を停止したときにわずかな遅延と呼び出しが発生する場所に到達しようとしています。

これが今の呼び出しです：

$('#input').on('input', function() {
  let _this = $(this);


  if (_this.val() === '') {
    return;
  } else {

    const searchResult = $(this).val();
    console.log(searchResult);
    //if I type "PLANT" the console shows "P" "PL" "PLA" "PLAN" "PLANT"

    //after 2 seconds, send searchResult via ajax
    setTimeout(function () {
        $.ajax({ url: '/endpoint', 
          data: {
            search_result:searchResult
          },
          "_token": "{{ csrf_token() }}",
          type: "POST", 
          success: successHandler 

        });
    }, 2000);
  }
});

コーディS

ajax呼び出しをデバウンスする必要があります。ユーザーが別の値を入力すると、タイムアウトがクリアされるという考え方です。そうすれば、ajax呼び出しは、ユーザーが指定されたタイムアウト期間（この場合は2秒）の間入力を停止した後に1回だけ行われます。これは次のようになります。

var timeout;

$('#input').on('input', function() {
  let _this = $(this);


  if (_this.val() === '') {
    return;
  } else {

    const searchResult = $(this).val();
    console.log(searchResult);
    //if I type "PLANT" the console shows "P" "PL" "PLA" "PLAN" "PLANT"

    if (timeout) {
      clearTimeout(timeout);
    }
    
    //after 2 seconds, send searchResult via ajax
    timeout = setTimeout(function () {
        $.ajax({ url: '/endpoint', 
          data: {
            search_result:searchResult
          },
          "_token": "{{ csrf_token() }}",
          type: "POST", 
          success: successHandler 

        });
    }, 2000);
  }
});

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]