Jquery 延迟事件直到用户完成输入

Question

比方说，在用户完成最后一个键入后一秒半启动的功能。我有这段代码，但每次用户创建一种类型时，都会启动我不想要的脚本：

$(document).ready(function()
{
  var $firstname    = $("#firstname");

  $firstname.keyup(function()
  {
    var content = $("#firstname").val();
    $.post("ajax.php", { firstname: content}, function(result){
        var contentDiv = $("#ContainerValidation");
        contentDiv.fadeOut(400, function(){ contentDiv.html(result); });
        contentDiv.fadeIn(400);
        contentDiv.fadeOut(5000);
      });
    });
});

感谢您的帮助。

Answer 1

我认为启动一个等待 1.5 秒的计时器就足够了，如果用户在这段时间内继续输入，计时器就会中止：

function send() {
    $.post("ajax.php", { firstname: $firstname.val()}, function(result){
        $("#ContainerValidation")
           .fadeOut(400, function(){ $(this).html(result); })
           .fadeIn(400)
           .fadeOut(5000);
    });
}

var timer = null;
$firstname.keyup(function() {
    clearTimeout(timer);
    timer = setTimeout(send, 1500);
});

Answer 2

您需要的是一个去抖动脚本。

一个非常简单的解决方案是嵌入 Underscore.js 库，它包含这样一个函数： http://documentcloud.github.com/underscore/#debounce

你可以像这样使用它：

$firstname.keyup(_.debounce(function () {
    var content = $("#firstname").val();
    $.post("ajax.php", {
        firstname: content
    }, function (result) {
        var contentDiv = $("#ContainerValidation");
        contentDiv.fadeOut(400, function () {
            contentDiv.html(result);
        });
        contentDiv.fadeIn(400);
        contentDiv.fadeOut(5000);
    });
}, 1500));