Просматривая написанный код всегда можно найти место, где можно его оптимизировать. Нашел у себя код на js, который выполнял поиск по базе.
Код был примерно таким.
<input onkeyup="search()" id="search"> Как видно функция срабатывает при отпускании клавиши. Что не совсем правильно, т.к. например если ввели 5 символов в поле, то в базу пойдет 5 запросов, а достаточен всего лишь 1, который выполнится с задержкой после ввода. Это можно устроить, путем введения таймера.
В ява скрипт есть функции для работы с ними.
var timeout_id = window.setTimeout(func|code, delay); — создает единичный таймер, при срабатывании которого происходит вызов определенной функции после указанной задержки (в миллисекундах).
var interval_id = window.setInterval(func|code, delay); — похож на предыдущий setTimeout, но вызывает функцию постоянно (каждый раз с заданной задержкой), пока не будет отменен.
clearInterval(timeout_id);, clearTimeout(interval_id); — принимают в качестве параметр ID таймера.
Будем использовать setInterval().
Код функции search() перенесем в новую функцию searchGo(), а в search() напишем следующий код, используя setInterval с помощью которого будем оптимизировать:search(){Далее из input уберем событие inkeyup, а вызов функции search() вставим в body onload.
var k = -1;
setInterval(
function(){
if(k >= 0) k++;
if(k >= 5) {
k = -1;
searchGo();
}
}
, 100
);
$('#search').keyup(function(){
k = 0;
});
}
Скрипт работает так:
1)при отпускании клавиши (событие keyup()) обнуляется счетчик k, и в таймере каждые 100сек k увеличивается на 1.
2)если счетчик стал равен 5, т.е. прошло 0.5 секунды, то счетчик отключается и вызывается функция поиска.
Как видно, при каждом отпускании клавиши счетчик обнуляется. И вместо кучи запросов на каждое отпускание клавиши, срабатывает только один, который вызывается, если в поле ничего не вводили больше 0.5 сек.
Если у вас есть более удачный пример оптимизации похожего кода, пишите.
Читать похожие статьи:
