JQueryのajaxライブ検証/タイムアウトの質問

Question

私はまだjQueryを初めて使っているので、おそらく簡単な解決策がありますが、何も見つかりません。 私はこの登録フォームを作成しました。この登録フォームは、ユーザーがユーザー名を入力するときにユーザー名または電子メールが使用されるかどうかを確認します。基本的には、ユーザー名/電子メールがすでに取得されているかどうかによってtrueまたはfalseを返すjsonリクエストを作成します。

問題は、入力テキストが3文字を超えると、フィールドにフォーカスしている間に基本的にすべてのキー入力を要求することです。今のところ、それはうまくいきますが、それは多くのサーバー要求です。ユーザーが入力していない半分、たとえば半分の時間だけ要求を出したいと思います。

どのようにすればいいのでしょうか？

$(document).ready(function() { 
$("#user_username").keyup(function() { 
    var ln = $(this).val().length; 
    if (ln > 3) { 
     $.getJSON("/validate/username/", 
     {value:$(this).val()}, 
     function(data){ 
      if (data.reg == true) { 
       $("#status-for-username").html("Username already in use"); 
      } else { 
       $("#status-for-username").html("Username available"); 
      } 
     }); 
    } 
}); 
$("#user_email").keyup(function() { 
    var ln = $(this).val().length; 
    if (ln > 3) { 
     $.getJSON("/validate/email/", 
     {value:$(this).val()}, 
     function(data){ 
      if (data.reg == true) { 
       $("#status-for-email").html("E-mail already in use"); 
      } else { 
       $("#status-for-email").html(""); 
      } 
     }); 
    } 
}); 

}）;

Answer 1

は、最後のキーストロークからの時間を待っているために、あなたが何かを行うことができます。ここで

私はあなたの概念の光実装を投稿：

使用法：

$("#user_username").keyup(function() { 
    typewatch(function() { 
    // executed only 500 ms after the last keyup event. 
    }, 500); 

実装：

var typewatch = function(){ 
    var timer = 0; // store the timer id 
    return function(callback, ms){ 
     clearTimeout (timer); // if the function is called before the timeout 
     timer = setTimeout(callback, ms); // clear the timer and start it over 
    } 
}(); 

StackOverflowの構文は、上のコードを着色するために、私が言及したプラグインを使用しています版。

Answer 2

window.setTimeoutとwindow.clearTimeoutを使用できます。基本的にxミリ秒で起動する関数を起動し、別のkeypressイベントがあらかじめ起動されている場合は、そのハンドラをクリアして新しいイベントを開始します。 jQuery.typeWatchプラグインが行うよう

//timeout var 
var timer; 
$('#username').keyUp(function(){ 
    //clear any existing timer 
    window.clearTimeout(timer); 
    //invoke check password function in 0.5 seconds 
    timer = window.setTimeout(checkPasswordFunc, 500); 
}); 

function checkPasswordFunc(){ 
    //ajax call goes here 

}