Событие задержки Jquery до завершения ввода пользователем

#jquery #action #wait

#jquery #Экшен #подождите

Вопрос:

Функция, которая будет запущена, скажем, через полторы секунды после того, как пользователь закончит вводить последний тип. У меня есть этот фрагмент кода, но каждый раз, когда пользователь вводит один тип, запускается скрипт, который мне не нужен:

 $(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);
      });
    });
});

Спасибо за вашу помощь.

1. Опубликованный вами код не запускается, когда пользователь вводит какие-либо данные. Оно запускается только один раз при загрузке страницы.

2. Как вы узнаете, что пользователь закончил печатать?

3. как вы подтверждаете, что пользователь закончил ввод? какую клавишу пользователь нажимает, чтобы завершить ввод?

4. @Felix: Я исправил код. Извините.

5. @Vikram и запустите… Я уверен, что есть хитрость, чтобы определить, закончил ли пользователь вводить ключ, например, запустить скрипт, ожидающий 2 секунды, а затем, если пользователь вводит снова, время выполнения сценария сбрасывается или что-то в этом роде. Таким образом, весь скрипт запускается только один раз или ограничен.

Ответ №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);
});

1. Спасибо за ваш ответ! Вы поняли проблему, но скрипт задерживается на 1,5 секунды (все в порядке), но если я наберу два символа, скрипт все равно будет запущен дважды.

2. О, я допустил небольшую ошибку. Вы должны удалить var внутри функции. Обновлено. Демонстрация: jsfiddle.net/gjFm9

3. Вместо использования глобальной переменной вы могли бы сохранить таймер с помощью $(this).data()

4. @ThiefMaster: Правильно. timer на самом деле не является глобальным, поскольку предполагается, что весь код находится в ready обработчике. Но у вас есть правильная точка зрения.

Ответ №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));

1. Большое спасибо за вашу помощь, мастер.. Я буду иметь в виду это решение. Феликс дал мне эквивалентное решение без этой библиотеки. Тем не менее, я посмотрю на это. В любом случае я даю вам преимущество.