Форум

SiZE · #1 (**permalink**) 21.02.2012, 15:45

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

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

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

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

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

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

vasa_c · #2 (**permalink**) 21.02.2012, 15:47

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

Kolyaj · #3 (**permalink**) 21.02.2012, 15:48

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

dmitriymar · #4 (**permalink**) 21.02.2012, 16:20

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

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

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

T-sh · #5 (**permalink**) 21.02.2012, 19:43

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

SiZE · #6 (**permalink**) 22.02.2012, 11:14

Сообщение от T-sh

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

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

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

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

T-sh · #7 (**permalink**) 22.02.2012, 13:09

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

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

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

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

в таких случаях я просто отлавливаю пробелы при заполнении

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

s_baklanov · #8 (**permalink**) 20.06.2017, 08:34

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

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

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

рони · #9 (**permalink**) 20.06.2017, 09:04

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>

s_baklanov · #10 (**permalink**) 20.06.2017, 10:20

Спасибо !

Форум

Справочник

Discord чат

Курсы javascript