Выполнение ajax-кода после нескольких секунд бездействия пользователя

Question

Я новичок здесь, поэтому, пожалуйста, будьте осторожны со мной. Это несколько запутанная ситуация. :)

Я работаю над поисковым вводом, в котором пользователь вводит имя другого пользователя (или часть имени) в текстовое поле поиска, а затем возвращается список пользователей, соответствующих этой строке поиска. Проблема в том, что это немного медленно, когда задействованы десятки тысяч пользователей. Из-за этой медлительности, когда пользователь быстро вводит имя в поисковый ввод, на экране начинают мигать результаты поиска для каждого нажатия клавиши (задолго до того, как пользователь уже ввел строку поиска в). Это как сильно замедленная реакция.

Например, если я введу имя «Венди», результаты поиска для строки поиска «W» (первый введенный мной символ) пока не будут отображаться. Результаты поиска для буквы «W» будут отображены, затем «Мы» и так далее, и так далее, хотя я уже набрал полное имя и просто хочу увидеть результаты для «Венди».

Что я хочу сделать, это выполнять поиск только тогда, когда пользователь ничего не вводил в течение определенного периода времени (я думаю, две секунды). В противном случае будет отображено слово «Поиск». Код метода Javascript приведен ниже. Как примечание, этот код в настоящее время работает для поиска среди пользователей, мне просто нужно реализовать отложенное выполнение.

function updateSearchResults() {
    if($F('searchString').length > 0){
        Element.update($('searchResultsScrollBox'), '<h3>Searching...</h3>'); 
        $('searching').style.display = 'block';
        var url = '<c:url value='ajaxFrontGetUsers.html'/>';
        var ajax = new Ajax.Updater({success: 'searchResults'}, url,
        {method: 'post', parameters: $('searchForm').serialize(true)});
         $('searching').style.display = 'none';
     }
}

Надеюсь, все это имеет смысл. Заранее спасибо всем, кто может помочь.

Answer 1

Попробуйте выполнить следующие действия:

1. Каждые несколько миллисекунд проверяйте, есть ли в текстовом поле новые данные.
2. Если в текстовом поле есть новый текст, запустите Ajax и скопируйте текст в переменную (для сравнения на шаге 1).

Если вы хотите улучшить производительность оттуда, активируйте таймер всякий раз, когда пользователь что-то печатает, и деактивируйте его, когда выполняется вызов Ajax.

Answer 2

Я знаю, что это старый вопрос, но для других, взглянув, я думаю, что вы делаете это неправильно. Я думаю, вы должны указывать дату / время каждого вызова ajax и отслеживать метки времени данных в своем javascript. Затем, когда возвращается вызов ajax, вы можете проверить отметку даты / времени и убедиться, что это набор результатов для самого последнего вызова ajax. Таким образом, вы сразу делаете вызов ajax для каждого нажатия клавиши, но отображаете результаты, только если результаты ajax совпадают с набором.

Кроме того, отправляете ли вы ВСЕ соответствующие результаты? Как тысячи только за букву W? Чтобы ускорить работу с JavaScript, возможно, вам следует ранжировать результаты в базе данных и вернуть только первые 10-20. В любом случае, он не хочет видеть больше 10-20 результатов.

Кроме того, ваш запрос SQL является оптимальным? Похоже, запрос занимает слишком много времени. Если вы выполняете односторонний поиск (т. Е. like input+'%'), а не двухсторонний поиск (т.

Answer 3

Или вы можете поместить обработчик события «onkeypress» в элемент, который очищает некоторую глобальную переменную или отменяет таймер, чтобы предотвратить запуск события AJAX. Я знаю, что Prototype реализует это для вас через встроенный редактор и опцию «частоты». (Я считаю, что он устанавливает таймер тайм-аута, который он отменяет после каждого нажатия клавиши.)

Answer 4

Эй, спасибо за ваш ответ. Я закончил тем, что установил интервалы в 500 миллисекунд, в которых функция javascript будет постоянно проверять, были ли введены новые символы в строку поиска в течение этого периода времени 500 миллисекунд. Если бы они были, функция поиска была бы вызвана для поиска по строке, введенной пользователем. В противном случае он будет ждать еще 500 миллисекунд, пока пользователь не прекратит печатать. В конце концов, это очень похоже на то, что вы предложили. Еще раз спасибо!