Задержка jQuery и ввод ключа

#jquery #delay #onkeyup

#jquery #задержка #onkeyup

Вопрос:

ПРИВЕТ, ребята,

Что я пытаюсь сделать, так это отобразить анимированный GIF-файл, пока кто-то вводит текст в текстовое поле с помощью keyup, и как только они закончат печатать, gif исчезнет и отобразится сообщение «Сохранено» на несколько секунд, которое затем исчезнет.

То, что я сделал до сих пор, это:

 if ($('.gallery_items li input').length > 0) {
    $('.gallery_items li input').keyup(function() {         
        var li = $(this).parent();
        li.children('.gallery_saving').removeClass('dn');
        var identity = li.attr('id').split('_');
        var v = $(this).val();
        var url = '/caption/id/'   identity[1];
        $.post(url, { caption : v });   
        $.delay(500).li.children('.gallery_saving').delay(500).html('Saved...').delay(500).addClass('dn');          
        return false;
    });
}

Где класс ‘gallery_saving’ имеет анимированный gif, назначенный в качестве фонового изображения, а класс ‘dn’ имеет просто css ‘display: none’.
Изначально ‘gallery_saving’ также содержит класс ‘dn’ — чтобы его не было видно, когда кто-то начинает вводить, класс ‘dn’ удаляется — показывая загрузчик.

Очевидно, вы уже видите проблему с:

 $.delay(500).li.children('.gallery_saving').delay(500).html('Saved...').delay(500).addClass('dn');

и я знаю, что это неправильно, но не могу понять, как это сделать — кто-нибудь может помочь?

1. Можете ли вы предоставить HTML для работы?

2. Будьте осторожны с вашим пониманием .delay() , в нем действительно указано: «Установите таймер для задержки выполнения последующих элементов в очереди» — но это для очереди эффектов, а не для всего. Взгляните на этот пример здесь , вы увидите, что .show() без каких-либо аргументов не является эффектом, поэтому не задерживается, и не является .css() эффектом, поэтому снова не задерживается, но .slideDown() является эффектом, поэтому он действительно задерживается!

Ответ №1:

Вы должны удалять загрузчик не по времени задержки, а по успешной сохранности введенных данных..

Что-то вроде

 url = "/echo/html";
v = "test";
$.ajax({
  url: url,
  type: 'POST',
  data: ({ caption: v}),
  success: function(){
    $('.gallery_saving').html('Saved...').delay(1000).fadeToggle("slow");
  },
  error:  function() {
    $('.gallery_saving').html('Error...').delay(1000).fadeToggle("slow");
  }
});

Пример: http://fiddle.jshell.net/gabel/udvbx /

Читать http://api.jquery.com/jQuery.ajax / для получения подробной информации…

Ответ №2:

Пытаться сделать это не особенно хорошая идея, потому что в конечном итоге вы будете выполнять много вызовов ajax, если пользователь на самом деле не закончил печатать. Если пользователь медленно печатает, вы будете сохранять данные много раз без причины.

Вы также могли бы использовать show() и hide() вместо dn класса. Или используйте toggleClass()

1. это правда — вы не должны отправлять post-запрос на свой собственный сервер, просто набирая текст.. для предотвращения такого поведения следует использовать размытие или тайм-аут.

2. Я думаю, вы правы, ребята — размытие может быть немного сложным, поскольку кто-то может оставить курсор в текстовом поле и щелкнуть ссылку, чтобы перейти на другую страницу, и я полагаю, что то же самое относится и к таймауту — так что, по-видимому, лучшим вариантом было бы разместить где-нибудь кнопку Сохранить — не такую сложную, но, я думаю, она справится с задачей.