Ограничение вызова ajax на вход

Question

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

Я установил вокруг него setTimeout на 2 секунды, что очень хорошо задерживает вызов. Но проблема в том, что он по-прежнему посылает вызов для каждого нажатия клавиши.

Я хочу получить его там, где через 2 секунды он отправляет вызов для того, что было набрано до сих пор. Если пользователь начнет печатать снова, возможно, он установится снова.

Я просто пытаюсь отправить меньше нажатий клавиш и сделать это там, где, когда пользователь перестает печатать, есть небольшая задержка и вызов.

Вот звонок сейчас:

$('#input').on('input', function() {
  let _this = $(this);


  if (_this.val() === '') {
    return;
  } else {

    const searchResult = $(this).val();
    console.log(searchResult);
    //if I type "PLANT" the console shows "P" "PL" "PLA" "PLAN" "PLANT"

    //after 2 seconds, send searchResult via ajax
    setTimeout(function () {
        $.ajax({ url: '/endpoint', 
          data: {
            search_result:searchResult
          },
          "_token": "{{ csrf_token() }}",
          type: "POST", 
          success: successHandler 

        });
    }, 2000);
  }
});

Answer 1

Вы должны отменить вызов ajax. Идея состоит в том, что тайм-аут очищается, если пользователь вводит другое значение. Таким образом, вызов ajax будет сделан только один раз после того, как пользователь перестал печатать в течение заданного периода времени (2 секунды для вашего случая). Это будет выглядеть примерно так:

var timeout;

$('#input').on('input', function() {
  let _this = $(this);


  if (_this.val() === '') {
    return;
  } else {

    const searchResult = $(this).val();
    console.log(searchResult);
    //if I type "PLANT" the console shows "P" "PL" "PLA" "PLAN" "PLANT"

    if (timeout) {
      clearTimeout(timeout);
    }
    
    //after 2 seconds, send searchResult via ajax
    timeout = setTimeout(function () {
        $.ajax({ url: '/endpoint', 
          data: {
            search_result:searchResult
          },
          "_token": "{{ csrf_token() }}",
          type: "POST", 
          success: successHandler 

        });
    }, 2000);
  }
});