Событие задержки 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));