Вчера немного переделывал движок моего блога, хотел ускорить загрузку сайта. Начала конечно с HTML кода, удалив лишние запросы на .js и .css файлы, объединил и сжал. Так же, решил оптимизировать изображения на сайте. Сделал 2 варианта главного изображения записи. Один в формате .JPG с ухудшенным качеством на 70%, а второй вариант в исходном качестве. К моему большому удивлению, это хорошо повлияло на загрузку сайта. Ведь исходное изображение весом в 351 Кб, сжалось до 42 Кб в формат .JPG.
Вы можете заметить, что сайт частично работает в режиме AJAX, так же и главные изображения подгружаются после загрузке самой страницы (это можно заметить, когда размытие изображения исчезает). Не скажу что скорость сайта увеличилась в over100500 раз, но разница небольшая чувствуется.
В следующей статье, я расскажу как оптимизировал сайт, а так же про отличные утилиты для сжатия файлов (CSS,JS,JPG и т.п.)
Наверное, у вас возник вопрос о том, зачем я вам рассказываю про оптимизацию? Да, дело в том, что после оптимизации изображений, я не подправил поиск сайта и следовательно изображения не подгружались и тупил сам поиск. Вотаквот...
После исправления этого бага, я заметил, что поиск работает нестабильно, а именно, при вводе одного символа, сразу отправлялся запрос на сервер. Я не учел это по своей невнимательности.
И сейчас, я расскажу вам как сделать на JavaScript выполнение функции с ожиданием. В моем случае это будет с поле <input>.
Прежде всего установим обработчик на наше поле. Можно установить для 3 событий: onKeyUp, onKeyDown, onKeyPress, onChange и еще для других событий.
На все события я не буду приводить пример, только onKeyUp. У jQuery есть метод .on(), который может принимать все эти события в одно значение.
_14$('input').on('keyup', function(){_14 var $this = $(this);_14 var $delay = 500;_14_14 clearTimeout($this.data('timer'));_14_14 $this.data('timer', setTimeout(function(){_14 $this.removeData('timer');_14 $.get('/search', { q: $this.val() }, function(){_14 alert('Поиск выполнен!');_14 });_14 }, $delay));_14_14});
<input>Перед выполнением функции, мы очищаем таймер который ранее мог быть создан. Таймер как вы можете понять не глобальный, а присвоен именно для нашего <input>.
Далее скрипт присваивает новый таймер и выполнит ваш код, который запустится после ввода значения. В нашем случае это GET запрос на сервер, после выполнения которого, появится окно с текстом Поиск выполнен!.
Живой пример можно увидеть на данном блоге, в блоке поиска или примером ниже.