Как обнаружить изменения значения `input` при вводе пользователем?

Question

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

Это это просто typeahead функциональность предложения, но все же не совсем то же самое.

В настоящее время у меня есть следующий код

$("input").on("input", function(ev) {
alert(`${ev.type} event detected`)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" placeholder="text">

И код работает, как и ожидалось, то есть всякий раз, когда изменяется значение поля input, событие фиксируется.

Мой вопрос в том, как заставить код ждать несколько секунд или миллисекунд, прежде чем обрабатывать события input change? Скажем, запустите код 1000ms позже, когда input перестанет меняться.

С тех пор код будет срабатывать для каждой введенной мною буквы, что приведет к множеству событий, которые я не делаю. не хочу.

Answer 1

Вы можете установить таймер, когда нажата клавиша, и если нажата другая клавиша, а таймер все еще работает (таймер var не равен нулю), отмените его перед повторной установкой таймера.

var timer;
$("input").on("input", function(ev) {
    if (timer) {
        clearTimeout(timer);
        timer = null;
    }
    timer = setTimeout(function(){
        console.log(`${ev.type} event detected`);
        timer = null;
    }, 1000);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" placeholder="text">

Answer 2

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

$("input").on("input", function(ev) {
  $(this).data({
    changed: true
  });
  window.setTimeout(() => {
    if ($(this).data("changed") == true) {
      alert(`${ev.type} event detected`);
      $(this).data({
        changed: false
      });
    }
  }, 1000);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" placeholder="text" />

Answer 3

Вот пример кода, который необходимо выполнить через 1 секунду после завершения ввода.

В основном, что он делает. это просто установка setTimeout, если нажата клавиша, тогда clearingTimeout, если другая клавиша нажата до 1000 мс. Если нет, то setTimeout будет выполняться.

var typingTimer;
var doneTypingInterval = 1000;
$("input[type='text']").on('input', function(e) {
  clearTimeout(typingTimer);
  typingTimer = setTimeout(doneTyping, doneTypingInterval);
});
function doneTyping() {
  alert("Hey!");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" placeholder="text">

Answer 4

Чтобы обнаружить input значение, изменяющееся при наборе пользователя, вам нужно просто проверить onInput событие -

 $('#testId').on("input", function (e) {
   var valInput = $('#testId').val();
   $('#inputVal').html(valInput);
   $('#inputChar').html(valInput.length);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="testId" />

<br />
<br />

<div>You typed : <strong><span id="inputVal"></span></strong> </div>

<br />

<div>No. of character : <strong><span id="inputChar">0</span></strong> </div>