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

等待上次击键后的一段时间，您可以执行类似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使用我提到的插件，用于在版本上对代码进行语法着色。

Answer 2

您可以使用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

}

Jquery ajax实时验证/超时问题

2 个答案: