В этой короткой заметке расскажу об одной технике, казалось бы очень очевидной, но тем не менее новички в программирования на JavaSсript часто про нее забывают.
Для начала обычный код, который Вы, я уверен, видели ни раз.
$('input').keyup(function(){
$.post('autocomplite.php',{str:this.value},function(data){
complite(data);
});
})
По мере набора текста, значение из поля ввода отправляется на сервер. Такой код часто используется в поиске по сайту, или для автокомплита.
Что в этом коде не так, как Вы считаете?
Проблема в том, что он грузит сервер лишней информацией. Пользователь ввел пару букв из 10-ти буквенного слова, на сервер ушло сразу 2 запроса, при этом ни один из них пользователя скорее всего не устроит, так как будет слишком много вариантов. И при каждом запросе, на сервере происходит запрос к огромным таблицам данных, и перелапачивание тон данных.
Как говорят американцы, хорошей практикой тут будет ввести таймаут. Код незначительно усложниться, но при этом, если пользователь быстро введет все слово, то на сервер уйдет всего один запрос.
var timer = 0;
$('input').keyup(function(){
clearTimeout(timer);
timer = setTimeout(function(){
$.post('autocomplite.php',{str:this.value},function(data){
complite(data);
});
},100);
});
Добавились два метода, setTimeout и clearTimeout. Первый устанавливает таймер на выполнение некой функции, второй его уничтожает. Зачем это нужно?
Все просто: когда пользователь ввел первую букву, устанавливаем таймер setTimeout на 100 миллисекунд, по истечении которых происходит запрос на сервер. Если до истечении этого времени, пользователь ввел еще одну букву, то уничтожаем первый таймер clearTimeout , и устанавливаем второй. В конечном итоге, запрос на сервер все равно отправится, но только с теми данными, которые были введены последними.
Полезно применять везде, где происходит обновление каких-либо данных, к примеру при обращении в цикле к DOM документа, если данные каждую итерацию цикла изменяются, то нет смысла изменять содержимое счетчиков, пользователь все равно не заметит их на такой скорости, но скрипт вы нагрузите лишними операциями.
Число 100 берется из головы, Вы можете подобрать для себя свои значения.
В моей коллекции полезных практик эта, пожалуй, самая любимая. Вы можете купить битрикс, со всеми его наворотами, а можете написать собственный велосипед, используя подобные оптимизации
