AJAX-вызов JS: нужно поспать, проверить, было ли введено больше символов, затем выполнить

Question

У меня есть приложение, которое включает в себя функцию поиска. Эта функция реализована, когда пользователь вводит термин в строке поиска. Как только пользователь вводит 3 символа, начинается вызов ajax. Я подумал, что этого будет достаточно, но оказалось, что есть ошибка, которая, как мне кажется, связана с синхронизацией, и тот факт, что несколько вызовов ajax могут быть выполнены быстро, просто набрав поисковый запрос длиной более 4 символов.

Я хотел бы сделать следующее:

1. Пользователь начинает печатать
2. скрипт проверяет наличие 3+ символов
3. как только набрано 3 символа, подождите (возможно с использованием setTimeout)
4. по истечении времени ожидания проверьте, было ли введено больше символов
5. цикл 3 и 4 до тех пор, пока в течение 1-2 секунд не будет введено больше символов
6. сделать вызов ajax ... отдых все готово ...

мой вопрос: я знаю, как я буду делать все, кроме проверки на поступление новых символов. Может быть что-то вроде этого:

var searchTerm;
function wait(userInput){
   if(userInput.length < 3){return 0;}
   searchTerm = userInput;
   setTimeout(function(){checkInput(userInput);}, 1000);
}

function checkInput(userInput){
   if (userInput == searchTerm){
      ... do AJAX call ...
   } else {
      return 0;
   }
}

Это совсем не так, и, вероятно, не убежит сразу. В любом случае, любая помощь, советы или указания будут с благодарностью.

Спасибо, Тим

Answer 1

Вам необходимо сохранять длину введенной строки каждый раз, когда ваш метод ожидания вызывается обратным вызовом html textbox.

Если текущая длина строки равна предыдущей длине, в этот интервал не было добавлено ни одного символа, чтобы вы могли вызвать ajax, в противном случае продолжайте ждать

    var timerHandle = null;
    var currLen = 0;
    function wait(userInput)
    {
        currLen = userInput.length;
        if(currLen < 3)
        {
            return 0;
        }

        if(timerHandle)
        {
            clearTimeout(timerHandle);
            timerHandle = null;
        }
        timerHandle = setTimeout(function(){checkInput(userInput);}, 1000);
    }


function checkInput(userInput)
{
    timerHandle = null;
    if (currLen == userInput.length)
    {
      ... do AJAX call ...
    } else {
      return 0;
   }
}