jquery - Jquery keyup 和发布数据

Question

$('#email').keyup(function(){
    setTimeout(function(){   
        $.post('advert/crop.php', {
            email:form.email.value, password:form.password.value            
        },
        function(output){
            $("#output").empty().append("<img src='loading.gif'/>");
            setTimeout(function() {$('#output').html(output).fadeIn(50)}, 500);
        }); 
    }, 2000);
});

我有一个输入类型的文本，我使用 jquery post 并从 php 回发来检查已注册的电子邮件或 pw 太短。

我在 2 秒后使用 keyup setTimeout，所以当用户输入时，它会自动检查。

我的问题是如果用户输入 3 个单词。它将发布 3 次。有什么办法可以解决这个问题吗？

在用户完成输入后每隔几秒设置一个计时器

Answer 1

每当有请求时清除计时器，keyup event以便只发送一个请求，该请求将是最新的。

var timer;
$('#email').keyup(function(){
    clearTimeout(timer);
    timer = setTimeout(function(){   
        $.post('advert/crop.php', {
            email:form.email.value, password:form.password.value            
        },
        function(output){
            $("#output").empty().append("<img src='loading.gif'/>");
            setTimeout(function() {$('#output').html(output).fadeIn(50)}, 500);
        }); 
    }, 2000);
});

Answer 2

(function () { //to avoid any variable set on global scope, use a closure
    var timeout;
    $('#email').keyup(function () {
        clearTimeout(timeout); //clear your timeout here
        timeout = setTimeout(function () {
            $.post('advert/crop.php', {
                email: form.email.value,
                password: form.password.value
            },

            function (output) {
                $("#output").empty().append("<img src='loading.gif'/>");
                setTimeout(function () {
                    $('#output').html(output).fadeIn(50)
                }, 500);
            });
        }, 2000);
    });
})();

Answer 3

您需要的是按键延迟 =) 基本上它的计时器在每次按键时都会重置，并且仅在计时器达到其限制时才运行帖子。

请参阅此 stackoverflow 答案：如何延迟 .keyup() 处理程序直到用户停止输入？