jquery ajax實時驗證/超時問題

我對jQuery仍然很陌生，所以可能有一個簡單的解決方案，但我找不到任何東西。我已經制作了這個註冊表單，用於檢查用戶名或電子郵件是否在用戶輸入用戶名時被採用。基本上，它只是使一個json請求返回true或false取決於用戶名/電子郵件是否已被採取。jquery ajax實時驗證/超時問題

現在的問題是，如果輸入的文本長度超過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(""); 
      } 
     }); 
    } 
});

}）;

來源

2009-08-23 gvidou

以來的最後一次按鍵等待的時間量，你可以像jQuery.typeWatch插件不做點什麼。

我在這裏張貼您輕的執行理念：

用法：

$("#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上使用我提到的插件，是一個語法上着色的代碼版。

來源

2009-08-23 18:35:41 CMS

謝謝，這正是我正在尋找的。 – gvidou 2009-08-23 18:42:01

不客氣！ – CMS 2009-08-23 19:11:29

您可以使用window.setTimeout和window.clearTimeout。基本上觸發一個函數在x毫秒內調用，如果事先觸發另一個按鍵事件，則清除該處理程序並啓動一個新處理程序。

//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 

}

來源

2009-08-23 18:32:29 redsquare

jquery ajax實時驗證/超時問題

回答

相關問題