8

入力セルの最後のキーアップから2〜3秒後に送信されるように、AJAXリクエストを遅らせようとしています。
これまでのところ、リクエストを遅らせることができましたが、2〜3秒後にフィールドのキーアップごとに1つのリクエストが送信されます.jQueryで最初のキーアップ
をキャンセルして最後のキーアップだけを送信するにはどうすればよいですか?
これまでのコードは次のとおりです。 

$('#lastname').focus(function(){
          $('.terms :input').val(""); //clears other search fields
}).keyup(function(){
    caps(this); //another function that capitalizes the field
    $type = $(this).attr("id"); // just passing the type of desired search to the php file
        setTimeout(function(){ // setting the delay for each keypress
                ajaxSearchRequest($type); //runs the ajax request

        }, 1000);
});

上記のこのコードは、1 秒待ってから、キーの押下に応じて 4 ～ 5 個の AJAX リクエストを送信します。keyup
Javascriptを使用するStackOverflowで同様のソリューションをいくつか見つけた最後の後に送信したいだけですが、プログラミングの知識が少ないため、それらをプロジェクトに実装できませんでした。

[解決済み] @Dr.Molle のおかげで、最終的な作業コード:

$('#lastname').focus(function(){
          $('.terms :input').val("");
}).keyup(function(){
    caps(this);
    $type = $(this).attr("id");

    window.timer=setTimeout(function(){ // setting the delay for each keypress
            ajaxSearchRequest($type); //runs the ajax request

        }, 3000);

}).keydown(function(){clearTimeout(window.timer);});

ajaxSearchRequestコードは次のとおりです。

function ajaxSearchRequest($type){
                var ajaxRequest2;  // The variable that makes Ajax possible!

                try{
                  // Opera 8.0+, Firefox, Safari
                  ajaxRequest2 = new XMLHttpRequest();
                }catch (e){
                  // Internet Explorer Browsers
                  try{
                     ajaxRequest2 = new ActiveXObject("Msxml2.XMLHTTP");
                  }catch (e) {
                     try{
                    ajaxRequest2 = new ActiveXObject("Microsoft.XMLHTTP");
                     }catch (e){
                    // Something went wrong
                    alert("Browser error!");
                    return false;
                     }
                  }
                }

                ajaxRequest2.onreadystatechange = function(){
                  if(ajaxRequest2.readyState == 4){

                        $result = ajaxRequest2.responseText;
                        $('#resultcontainer').html($result);

                    }}


                var searchterm = document.getElementById($type).value;


                var queryString ="?searchterm=" + searchterm +"&type=" +$type;


                if(searchterm !== ""){

                ajaxRequest2.open("GET", "searchrequest.php" + 
                                 queryString, true);
                ajaxRequest2.send(null);
                }
        }
4

3 に答える 3

17

タイムアウトを変数に保存して、最近のタイムアウトをクリアできるようにします。

clearTimeout(window.timer);
window.timer=setTimeout(function(){ // setting the delay for each keypress
                ajaxSearchRequest($type); //runs the ajax request

        }, 3000);
于 2012-07-03T09:59:05.893 に答える
3

あなたがやろうとしていることはdebounceと呼ばれます。

これは、仕事をするベン・アルマンによるjqueryプラグインです。

また、underscore.jsにもこの機能が含まれています。

ajax リクエスト システムをハックする必要はまったくありません。適切なタイミングで呼び出されるようにしてください。

于 2012-07-03T12:33:24.407 に答える
-2

私はモールの答えが好きですが、パフォーマンスをさらに改善したいと思います

var ajaxRequest2;  // The variable that makes Ajax possible!
function getAjaxObject()
{
                try{
                  // Opera 8.0+, Firefox, Safari
                  ajaxRequest2 = new XMLHttpRequest();
                }catch (e){
                  // Internet Explorer Browsers
                  try{
                     ajaxRequest2 = new ActiveXObject("Msxml2.XMLHTTP");
                  }catch (e) {
                     try{
                    ajaxRequest2 = new ActiveXObject("Microsoft.XMLHTTP");
                     }catch (e){
                    // Something went wrong
                    alert("Browser error!");
                   // return false;
                     }
                  }
                }
  return ajaxRequest2;


 }
   getAjaxObject();

    function ajaxSearchRequest($type){



               if(typeof ajaxRequest2 =="undefined" || ajaxRequest2 == false)
                {
                  return;
                }
               ajaxRequest2.abort();

                ajaxRequest2.onreadystatechange = function(){
                  if(ajaxRequest2.readyState == 4){

                        $result = ajaxRequest2.responseText;
                        $('#resultcontainer').html($result);

                    }}


                var searchterm = document.getElementById($type).value;


                var queryString ="?searchterm=" + searchterm +"&type=" +$type;


                if(searchterm !== ""){

                ajaxRequest2.open("GET", "searchrequest.php" + 
                                 queryString, true);
                ajaxRequest2.send(null);
                }
        }

この変更により、進行中の ajax リクエストが中止され、新しいリクエストが送信されます。するときに役立ちます。

入力 -> 4 秒待機 -> 要求が送信された -> 再度入力 (応答が受信されない) -> 4 秒待機 -> 別の要求が発生する

于 2012-07-03T10:04:52.713 に答える