Javascript-форум - Ожидание окончания ввода в поле input

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Ожидание окончания ввода в поле input (https://javascript.ru/forum/events/25970-ozhidanie-okonchaniya-vvoda-v-pole-input.html)

Ожидание окончания ввода в поле input

Не знаю как правильно сформулировать мысль, поэтому извиняюсь если тема уже повторялась.

Есть вот такой код, в кратце:

$('input[type="text"]').keypress(myFunc);

function myFunc(){
 alert( $(this).val() );
}

Хочется сделать вызов myFunc после того, как пользователь завершил ввод. Т.е. с момента последнего нажатия клавиши прошло больше 1 секунды. Или поставить myFunc в очередь и отслеживать повторные вызовы.

Сейчас я просто устанавливаю время последнего нажатия, засекаю его в другой переменной. Затем устанавливаю таймаут вызова myFunc в 1 сек. После чего проверяю, изменилось ли время последнего нажатия. Если нет, считаю, что пользователь завершил ввод и можно выполнить функцию, иначе выхожу.
Получается, что для каждого нажатия клавиши, срабатывает эта проверка. Интуитивно чувствую, что есть другой способ, но не понимаю, как реализовать его.

:help:

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

после нажатия, если таймер установлен, сбрасывать и ставить по новой(по таймеру выполняется функция завершения ввоода),если не установлен просто ставить таймер-отпадает и проверка на

Цитата:

Сообщение от SiZE

. После чего проверяю, изменилось ли время последнего нажатия. Если нет, считаю, что пользователь завершил ввод и можно выполнить функцию, иначе выхожу....

а не проще сделать отслеживание потери фокуса и по нему выполнять функцию? есть люди, которые оооочень медленно печатают :)

Цитата:

Сообщение от T-sh (Сообщение 158986)

а не проще сделать отслеживание потери фокуса и по нему выполнять функцию?

По мере ввода происходит поиск вхождения по древовидной структуре данных на странице. Раскрываются/закрываются родительские ветки, найденные совпадения подсвечиваются. Т.к. форма состоит из одного поля, фокус не будет удобен.
На данный момент все это очень сильно тормозит (несколько тысяч записей в дереве).

Я пока отказался от варианта поиска по мере набора и сделал принудительную кнопку поиска.

Комментарии выше прочитал спасибо, буду изучать.

Цитата:

Сообщение от SiZE (Сообщение 159103)

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

Как использовать debounce ?

Цитата:

Сообщение от Kolyaj (Сообщение 158897)

Паттерн debounce.
https://github.com/Kolyaj/CrossJS/bl...unction.js#L26

А как можно это использовать ? Нет никакой инструкции.
Как я понял после подключения скрипта любая функция должна иметь в себе debounce
То есть создаю функцию
function test(text) {
alert(text);
}
потом можно
test.debounce('test')
Но так не работает
Как надо то ?

debounce или запуск функции по окончании ввода

s_baklanov,
ввести текст, подождать 2сек.

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>

  <script>
 /*https://github.com/Kolyaj/CrossJS/blob/master/source/lang/Function.js#L26  */
(function(Function_prototype) {
 Function_prototype.debounce = function(delay, ctx) {
        var fn = this, timer;
        return function() {
            var args = arguments, that = this;
            clearTimeout(timer);
            timer = setTimeout(function() {
                fn.apply(ctx || that, args);
            }, delay);
        };
    };

})(Function.prototype);

window.addEventListener('DOMContentLoaded', function() {
  var input = document.querySelector('input');
 function test() {
    alert(this.value);
 }
 input.addEventListener('input', test.debounce(2000));
 });

 </script>
</head>

<body>
<input name="">

</body>
</html>