jquery - jquery post() のスタッキングを回避する方法

Question

ユーザーが新しい投稿のタイトルを入力しているときに、重複するコンテンツをサイトで検索するスクリプトがあります (Quora と同様)。現在、キーアップ時にポスト リクエストが発生するため、ポスト リクエストのスタックが発生します。

これを回避する最善の方法についてのアイデアはありますか?

$("#topic_title").keyup(function(){
    var search_val=$(this).val(); 
    $.post('/?post_type=topic&duplicate=1',{s:search_val},function(data){
        if(data.length>0){
           var results = $(data).find( '#results' );
           $("#duplicates").html(results);
        }

     });
});

**質の高い回答をありがとう！簡単にするために、abort() メソッドを使用しました。魅力のように機能します。

Answer 1

このような状況で私が通常行うことは 2 つあります。

1. 一定時間、たとえば 0.5 秒間キーが押されていない場合にのみ、要求を送信します。この方法では、ユーザーがすばやく入力している場合、10 件の要求を送信するのではなく、ユーザーが入力をやめたときに 1 件送信するだけです。setTimeoutこれは、 と を使用して実行できますclearTimeout。

2. 新しいリクエストが送信されたら、前のリクエストをキャンセルします。このようにして、アクティブなリクエストは 1 つだけになります。とにかく、あなたは本当に最新のものだけを気にします。これは、 を使用して実行できますabort()。

大まかな概要:

var timeout;
var xhr;

$("#topic_title").keyup(function(){
    if(timeout) clearTimeout(timeout);
    if(xhr) xhr.abort();

    timeout = setTimeout(function(){
        doThePost(<parameters>);
    }, 500);
});

function doThePost(){
    xhr = $.post(...);
}

Answer 2

キーアップイベントが頻繁に発生するように調整します。このスロットルプラグインを使用できます

ここでの例では、イベントをスロットルして250ミリ秒の遅延で発生させるため、すべてのキーストロークの代わりに、250ミリ秒ごとに1つのキーアップのみを実行します。

 $("#topic_title").keyup($.throttle(250, function () {
      var search_val=$(this).val(); 
      $.post('/?post_type=topic&duplicate=1',{s:search_val},function(data){
         if(data.length>0){
            var results = $(data).find( '#results' );
            $("#duplicates").html(results);
         }
      });
 });

Answer 3

jQuery を使用して Ajax リクエストを中止する を参照してください。

var xhr = null;

$("#topic_title").keyup(function()
{
    var search_val=$(this).val();

    if(xhr != null)
        xhr.abort();

    xhr = $.post('/?post_type=topic&duplicate=1',{s:search_val},function(data){
        if(data.length>0){
           var results = $(data).find( '#results' );
           $("#duplicates").html(results);
        }
    });
});

Answer 4

簡単な方法は、タイマーを使用してポストを呼び出し、スタックされている場合はタイマーをクリアすることです。下記参照、

$(function () { 
  var timer = null;//in scope
  $("#topic_title").keyup(function(){
    var search_val=$(this).val();

    if (timer != null) {
       clearTimeout(timer);
    }

    timer = setTimeout(function () {
       $.post('/?post_type=topic&duplicate=1',{s:search_val},function(data){
          if(data.length>0){
            var results = $(data).find( '#results' );
            $("#duplicates").html(results);
          }      
       });
     }, 1000); //The timer is 1 second, update timer as your need.
  });
});

Answer 5

このjQueryプラグインをチェックしてください。 スロットル-debounce.js