jQuery: Задержка функции при вводе в input

Дата: 29.05.2016 в 19:34, Категория: jQuery
  • 3573
  • 7
jQuery: Задержка функции при вводе в input

Вчера немного переделывал движок моего блога, хотел ускорить загрузку сайта. Начала конечно с HTML кода, удалив лишние запросы на .js и .css файлы, объединил и сжал. Так же, решил оптимизировать изображения на сайте. Сделал 2 варианта главного изображения записи. Один в формате .JPG с ухудшенным качеством на 70%, а второй вариант в исходном качестве. К моему большому удивлению, это хорошо повлияло на загрузку сайта. Ведь исходное изображение весом в 351 Кб, сжалось до 42 Кб в формат .JPG.

Вы можете заметить, что сайт частично работает в режиме AJAX, так же и главные изображения подгружаются после загрузке самой страницы (это можно заметить, когда размытие изображения исчезает). Не скажу что скорость сайта увеличилась в over100500 раз, но разница небольшая чувствуется.

В следующей статье, я расскажу как оптимизировал сайт, а так же про отличные утилиты для сжатия файлов (CSS,JS,JPG и т.п.)

Наверное, у вас возник вопрос о том, зачем я вам рассказываю про оптимизацию? Да, дело в том, что после оптимизации изображений, я не подправил поиск сайта и следовательно изображения не подгружались и тупил сам поиск. Вотаквот...

После исправления этого бага, я заметил, что поиск работает нестабильно, а именно, при вводе одного символа, сразу отправлялся запрос на сервер. Я не учел это по своей невнимательности.

И сейчас, я расскажу вам как сделать на JavaScript выполнение функции с ожиданием. В моем случае это будет с поле <input>.

Прежде всего установим обработчик на наше поле. Можно установить для 3 событий: onKeyUp, onKeyDown, onKeyPress, onChange и еще для других событий.

# Объяснение событий:

  • .onKeyUp() - происходит в том случае, когда пользователь отпустил клавишу.
  • .onKeyDown() - происходит в том случае, когда пользователь удерживает клавишу.
  • .onKeyPress() - происходит в том случае, когда пользователь нажал или отпустил клавишу.
  • .onChange() - происходит в том случае, когда пользователь ввел значение в поле и потерял фокус.

На все события я не буду приводить пример, только onKeyUp. У jQuery есть метод .on(), который может принимать все эти события в одно значение.

$('input').on('keyup', function(){
        var $this = $(this);
        var $delay = 500;

        clearTimeout($this.data('timer'));

        $this.data('timer', setTimeout(function(){
                $this.removeData('timer');
                $.get('/search', { q: $this.val() }, function(){
                        alert('Поиск выполнен!');
                });
        }, $delay));

});
  • $this - хранит ссылку на объект нашего <input>
  • $delay - время ожидания в миллисекундах. В нашем случае это полсекунды.

Перед выполнением функции, мы очищаем таймер который ранее мог быть создан. Таймер как вы можете понять не глобальный, а присвоен именно для нашего <input>.

Далее скрипт присваивает новый таймер и выполнит ваш код, который запустится после ввода значения. В нашем случае это GET запрос на сервер, после выполнения которого, появится окно с текстом Поиск выполнен!.

Живой пример можно увидеть на данном блоге, в блоке поиска или примером ниже.

# Демо