Jquery keyup 和发布数据答案

【问题标题】：Jquery keyup & post dataJquery keyup 和发布数据
【发布时间】：2013-08-08 16:18:48
【问题描述】：

$('#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 次。有什么办法可以解决吗？

设置一个计时器，仅在用户完成输入后每隔几秒发布一次

【问题讨论】：

标签： jquery

【解决方案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);
});

【讨论】：

【解决方案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);
    });
})();

【讨论】：

【解决方案3】：

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

查看这个 stackoverflow 答案：How to delay the .keyup() handler until the user stops typing?

【讨论】：