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

Question

Я разрабатываю веб-сайт и хотел бы иметь возможность вызывать функцию через 1 секунду после последнего ввода пользователя. Я попытался использовать onKeyUp, но он ждал 1 секунду после первого нажатия клавиши.

Кто-нибудь знает, как это возможно?

Answer 1

Еще один похожий подход, без глобалов:

var typewatch = function(){
    var timer = 0;
    return function(callback, ms){
        clearTimeout (timer);
        timer = setTimeout(callback, ms);
    }  
}();    

...

<input type="text" onKeyUp="typewatch(function(){alert('Time elapsed!');}, 1000 );" />

Вы можете этот фрагмент здесь .

Answer 2

Вы можете использовать событие keyDown (или keyUp), которое заставляет функцию работать в течение 1 секунды, и если пользователь вводит другую клавишу в течение этой секунды, вы можете сбросить время ожидания и установить новое.

* 1005 Е.Г. *

var t;    

function keyDown()
{
  if ( t )
  {
    clearTimeout( t );
    t = setTimeout( myCallback, 1000 );
  }
  else
  {
    t = setTimeout( myCallback, 1000 );
  }
}

function myCallback()
{
   alert("It's been 1 second since you typed something");
}

Answer 3

Неважно, я нашел способ сделать это. Я вызываю функцию для каждого onkeyup (), которая увеличивает значение счетчика, а затем ждет 1 секунду. По истечении 1 секунды счетчик уменьшается и проверяет, равен ли он 0.

var keystrokes = 0;
function askAgain()
{
    ++keystrokes;
    setTimeout(reveal, 1000);
}

function reveal()
{
    --keystrokes;

    if (keystrokes == 0)
        alert("Watch out, there is a snake!");
}

Answer 4

Есть какой-то простой плагин , который я сделал, который делает именно это. Он требует гораздо меньше кода, чем некоторые предлагаемые решения, и он очень легкий (~ 0,6 КБ)

Сначала вы создаете Bid объект, который может быть bumped в любое время. Каждый удар будет задерживать срабатывание Bid обратный вызов для следующего заданного количества времени.

var searchBid = new Bid(function(inputValue){
    //your action when user will stop writing for 200ms. 
    yourSpecialAction(inputValue);
}, 200); //we set delay time of every bump to 200ms

Когда Bid объект готов, нам нужно как-то bump. Давайте прикрепим натыкаясь к keyup event.

$("input").keyup(function(){
    searchBid.bump( $(this).val() ); //parameters passed to bump will be accessable in Bid callback
});

---

Что здесь происходит:

Каждый раз, когда пользователь нажимает клавишу, ставка «задерживается» (повышается) на следующие 200 мс. Если 200 мс пройдет без повторного «удара», обратный вызов сработает.

Кроме того, у вас есть 2 дополнительные функции для остановки ставки (если пользователь нажал клавишу esc или, например, нажал кнопку ввода снаружи) и для немедленного завершения и запуска обратного вызова (например, когда пользователь нажал клавишу ввода):

searchBid.stop();
searchBid.finish(valueToPass);

Answer 5

Просто измените ваш HTML-ввод и добавьте эту первую строку в ваши существующие функции, чтобы вам не приходилось перекодировать все, что у вас есть. Это также не повлияет на любые старые функции вызова кода, так как если onkeypress не установлено, то mykeypress всегда будет <1. </p>

var mykeypress=0;
var mysleep=1000; //set this higher if your users are slow typers
function mytest(id,text) {
   mykeypress--; if(mykeypress > 0) { return; }
   //anything you want when user stops typing here
   alert("Keypress count at "+mykeypress+" ready to continue 
id is "+id+" arguement is "+text);
}

input type="text" name="blah" id="55" onkeypress="mykeypress++"
onkeyup="myid=this.id;setTimeout(function (){mytest(myid,'a test')},mysleep)"
REVERT to old way seamlessly:
input type="text" name="blah" id="55" onkeyup="mytest(this.id,'a test')"