AJAX: Задержка поиска при вводе в поле формы

На моем веб-сайте я использую JavaScript/AJAX для выполнения поиска и отображения результатов, пока пользователь все еще печатает.

HTML (тело):

<form action="" method="post" accept-charset="utf-8">
    <p><input type="text" name="q" id="q" value="" onkeyup="doSearch(this.value)" /></p>
</form>

JavaScript (заголовок):

function doSearch(text) {
    // do the ajax stuff here
    // call getResults.php?search=[text]
}

Но это может вызвать множество запросов, поступающих на сервер.

Таким образом, я хочу сбросить сервер, установив задержку:

Всякий раз, когда запускается событие onkeyup, функция doSearch() должна показывать "графику загрузки ajax" и ждать в течение 2 секунд. Только в том случае, если в течение этих 2 секунд НЕ запускается событие, результаты должны быть получены из файла PHP.

Есть ли способ сделать это? Не могли бы вы мне помочь, пожалуйста? Спасибо заранее!

Ответы

Ответ 1

var delayTimer;
function doSearch(text) {
    clearTimeout(delayTimer);
    delayTimer = setTimeout(function() {
        // Do the ajax stuff
    }, 1000); // Will do the ajax stuff after 1000 ms, or 1 s
}

Ответ 2

Просто установите задержанный вызов с помощью setTimeout(), а затем удалите его снова для каждого события с помощью clearTimeout()

HTML

<form action="" method="post" accept-charset="utf-8">
    <p><input type="text" name="q" id="q" value="" onkeyup="doDelayedSearch(this.value)" /></p>
</form>

Javascript

var timeout = null;

function doDelayedSearch(val) {
  if (timeout) {  
    clearTimeout(timeout);
  }
  timeout = setTimeout(function() {
     doSearch(val); //this is your existing function
  }, 2000);
}