Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.02.2012, 15:45
Новичок на форуме
Отправить личное сообщение для SiZE Посмотреть профиль Найти все сообщения от SiZE
 
Регистрация: 04.05.2009
Сообщений: 7

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

Есть вот такой код, в кратце:
$('input[type="text"]').keypress(myFunc);

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


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

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

Ответить с цитированием
  #2 (permalink)  
Старый 21.02.2012, 15:47
Аватар для vasa_c
Профессор
Отправить личное сообщение для vasa_c Посмотреть профиль Найти все сообщения от vasa_c
 
Регистрация: 12.03.2008
Сообщений: 183

других способов бесчётное количество, но ваш вполне оптимальный, если я его правильно понял.
Ответить с цитированием
  #3 (permalink)  
Старый 21.02.2012, 15:48
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

Паттерн debounce.
https://github.com/Kolyaj/CrossJS/bl...unction.js#L26
Ответить с цитированием
  #4 (permalink)  
Старый 21.02.2012, 16:20
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,588

после нажатия, если таймер установлен, сбрасывать и ставить по новой(по таймеру выполняется функция завершения ввоода),если не установлен просто ставить таймер-отпадает и проверка на
Сообщение от SiZE
. После чего проверяю, изменилось ли время последнего нажатия. Если нет, считаю, что пользователь завершил ввод и можно выполнить функцию, иначе выхожу....
Ответить с цитированием
  #5 (permalink)  
Старый 21.02.2012, 19:43
Аватар для T-sh
Профессор
Отправить личное сообщение для T-sh Посмотреть профиль Найти все сообщения от T-sh
 
Регистрация: 04.12.2009
Сообщений: 579

а не проще сделать отслеживание потери фокуса и по нему выполнять функцию? есть люди, которые оооочень медленно печатают
__________________
С моих слов записано верно.
Ответить с цитированием
  #6 (permalink)  
Старый 22.02.2012, 11:14
Новичок на форуме
Отправить личное сообщение для SiZE Посмотреть профиль Найти все сообщения от SiZE
 
Регистрация: 04.05.2009
Сообщений: 7

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

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

Комментарии выше прочитал спасибо, буду изучать.
Ответить с цитированием
  #7 (permalink)  
Старый 22.02.2012, 13:09
Аватар для T-sh
Профессор
Отправить личное сообщение для T-sh Посмотреть профиль Найти все сообщения от T-sh
 
Регистрация: 04.12.2009
Сообщений: 579

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

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

Комментарии выше прочитал спасибо, буду изучать.
в таких случаях я просто отлавливаю пробелы при заполнении и по пробелу выполняю то, что нужно ) а если записей несколько тысяч, оно при любом раскладе тормозить будет. нагрузка есть нагрузка, с этим ничего ни поделать )
__________________
С моих слов записано верно.
Ответить с цитированием
  #8 (permalink)  
Старый 20.06.2017, 08:34
Новичок на форуме
Отправить личное сообщение для s_baklanov Посмотреть профиль Найти все сообщения от s_baklanov
 
Регистрация: 03.11.2016
Сообщений: 8

Как использовать debounce ?
Сообщение от 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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

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>
Ответить с цитированием
  #10 (permalink)  
Старый 20.06.2017, 10:20
Новичок на форуме
Отправить личное сообщение для s_baklanov Посмотреть профиль Найти все сообщения от s_baklanov
 
Регистрация: 03.11.2016
Сообщений: 8

Спасибо !
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Получить координаты курсора в текстовом поле в пикселях prike Events/DOM/Window 4 23.05.2013 04:35
IE 8: курсор, установленный в поле INPUT, пробивает стены насквозь! Маэстро Internet Explorer 4 21.06.2011 01:38
Opera не выполняет style.fontSize=... в поле input Маэстро Opera, Safari и др. 6 20.06.2011 12:03
Перенос id чекбокса в поле input azarubin Общие вопросы Javascript 7 14.01.2011 22:30
Позиционирование курсора в поле ввода spider84 Элементы интерфейса 1 22.07.2010 13:03