Jak mogę poczekać, aż użytkownik zakończy zapisywanie w tekście, aby wywołać funkcję?

Question

Projektuję stronę internetową i chciałbym móc wywołać funkcję 1 sekundę po ostatnim wprowadzeniu użytkownika. Próbowałem użyć onKeyUp, ale czekał 1 sekundę po pierwszym naciśnięciu klawisza.

Czy ktoś wie, w jaki sposób byłoby to możliwe?

Answer 1

Innym podobne podejście, bez globalne:

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);" /> 

Można to urywek here.

Answer 2

Nieważne, znalazłem sposób na zrobienie tego. Wywołuję funkcję na każdym onkeyup(), który zwiększa licznik, a następnie czeka 1 sekundę. Po 1 sekund upłynęło, to zmniejszamy licznik i sprawdzić, czy jest równa 0.

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

function reveal() 
{ 
    --keystrokes; 

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

Answer 3

Można użyć keyDown (lub keyUp) wydarzenie, które określa funkcję do uruchomienia w ciągu 1 sekundy, a jeśli użytkownik wpisze kolejne klucz w tej sekundzie, możesz skasować limit czasu i ustawić nowy.

E.g.

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 4

Po prostu zmodyfikuj swoje wejście html i wrzuć ten pierwszy wiersz do istniejących funkcji, dzięki czemu nie musisz przekodować niczego, co masz. To nie wpłynie na wszystkie stare funkcje kodu wzywając albo, ponieważ jeśli nie jest ustawiona onkeypress następnie mykeypress zawsze będzie < 1.

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')" 

Answer 5

Istnieje kilka prostych plugin Zrobiłem to robi exacly że. Wymaga znacznie mniej kodu niż niektóre proponowane rozwiązania i jest bardzo lekki (~ 0,6kb).

Najpierw należy utworzyć obiekt Bid, niż może być w dowolnej chwili bumped. Każde wywołanie bump opóźni odpalanie połączenia telefonicznego Bid dla następnej podanej ilości czasu.

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 

Kiedy Bid obiekt jest gotowy, musimy go jakoś bump. Podłączmy się, podskakując do keyupevent.

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

---

Co się dzieje tutaj jest:

Everytime użytkownik naciska klawisz oferta jest 'opóźniony' (zderzyłem) dla kolejnych 200ms. Jeśli 200ms przejdzie bez ponownego "bumped", wywołanie zwrotne zostanie zwolnione.

Ponadto, masz 2 dodatkowe funkcje zatrzymywania stawkę (jeśli naciśnięty użytkownika ESC lub kliknąć poza wejściem na przykład) i do wykańczania i natychmiast wypalania zwrotnego (na przykład, gdy użytkownik naciśnie klawisz Enter):

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