Оптимизированный поиск с использованием ajax и keypress
У меня есть следующий код, поскольку я хочу искать базу данных, когда пользователь вводит текстовое поле. Этот код ниже работает отлично, но кажется немного неэффективным, как если бы пользователь печатал очень быстро, я потенциально делаю много больше запросов, чем необходимо. Поэтому, если пользователь вводит "парусный спорт"
Я ищу "паруса", "саили", "парус" и "парусный спорт"
Мне хотелось узнать, есть ли способ обнаружить какое-либо конкретное время между нажатиями клавиш, поэтому нужно только искать, если пользователь перестанет печатать на 500 миллисекунд или что-то вроде этого.
Есть ли лучшие практики для чего-то вроде этого?
$('#searchString').keypress(function(e) {
if (e.keyCode == 13) {
var url = '/Tracker/Search/' + $("#searchString").val();
$.get(url, function(data) {
$('div#results').html(data);
$('#results').show();
});
}
else {
var existingString = $("#searchString").val();
if (existingString.length > 2) {
var url = '/Tracker/Search/' + existingString;
$.get(url, function(data) {
$('div#results').html(data);
$('#results').show();
});
}
}
Ответы
Ответ 1
Вы можете сделать что-то вроде этого:
$('#searchString').keyup(function(e) {
clearTimeout($.data(this, 'timer'));
if (e.keyCode == 13)
search(true);
else
$(this).data('timer', setTimeout(search, 500));
});
function search(force) {
var existingString = $("#searchString").val();
if (!force && existingString.length < 3) return; //wasn't enter, not > 2 char
$.get('/Tracker/Search/' + existingString, function(data) {
$('div#results').html(data);
$('#results').show();
});
}
Что это такое - выполнить поиск (в keyup
, лучше, чем keypress
для этих ситуаций) после 500ms
, сохраняя таймер в элементе #searchString
.data()
. Каждый keyup
он очищает этот таймер, и если ключ был введен, выполняется поиск немедленно, если он не устанавливает другой тайм-аут 500ms
перед автоматическим поиском.
Ответ 2
Смотрите этот старый вопрос:
Как сделать мой live jQuery-запрос ждать секунды перед выполнением поиска?
Ответ 3
Что бы я сделал, это каждое нажатие клавиши использует функцию setTimeout с требуемой задержкой. Таким образом, эта функция будет срабатывать после этого таймаута. Каждое нажатие клавиши затем удаляет таймер и устанавливает новый, с clearTimeout();
См. здесь несколько примеров, прокручивая все рекламные объявления.
http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/