Wie kann ich ein Ereignis im Eingabetext auslösen, nachdem ich mit dem Tippen/Schreiben aufgehört habe?

Ich möchte ein Ereignis auslösen, kurz nachdem ich aufgehört habe, Zeichen in mein Eingabetextfeld einzugeben (nicht während der Eingabe).

Ich habe es versucht mit:

$('input#username').keypress(function() {
    var _this = $(this); // copy of this object for further usage

    setTimeout(function() {
        $.post('/ajax/fetch', {
            type: 'username',
            value: _this.val()
        }, function(data) {
            if(!data.success) {
                // continue working
            } else {
                // throw an error
            }
        }, 'json');
    }, 3000);
});

Aber dieses Beispiel erzeugt eine Zeitüberschreitung für jedes eingegebene Zeichen und ich bekomme ungefähr 20 AJAX-Anfragen, wenn ich 20 Zeichen eintippe.

Auf dieser Geige Ich demonstriere das gleiche Problem mit einer einfachen Warnung anstelle eines AJAX.

Gibt es dafür eine Lösung oder verwende ich dafür nur einen schlechten Ansatz?

Sie müssen a verwenden setTimeout (wie Sie), sondern speichern Sie auch die Referenz, damit Sie das Limit immer wieder zurücksetzen können. Etwas wie:

//
// $('#element').donetyping(callback[, timeout=1000])
// Fires callback when a user has finished typing. This is determined by the time elapsed
// since the last keystroke and timeout parameter or the blur event--whichever comes first.
//   @callback: function to be called when even triggers
//   @timeout:  (default=1000) timeout, in ms, to to wait before triggering event if not
//              caused by blur.
// Requires jQuery 1.7+
//
;(function($){
    $.fn.extend({
        donetyping: function(callback,timeout){
            timeout = timeout || 1e3; // 1 second default timeout
            var timeoutReference,
                doneTyping = function(el){
                    if (!timeoutReference) return;
                    timeoutReference = null;
                    callback.call(el);
                };
            return this.each(function(i,el){
                var $el = $(el);
                // Chrome Fix (Use keyup over keypress to detect backspace)
                // thank you @palerdot
                $el.is(':input') && $el.on('keyup keypress paste',function(e){
                    // This catches the backspace button in chrome, but also prevents
                    // the event from triggering too preemptively. Without this line,
                    // using tab/shift+tab will make the focused element fire the callback.
                    if (e.type=='keyup' && e.keyCode!=8) return;
                    
                    // Check if timeout has been set. If it has, "reset" the clock and
                    // start over again.
                    if (timeoutReference) clearTimeout(timeoutReference);
                    timeoutReference = setTimeout(function(){
                        // if we made it here, our timeout has elapsed. Fire the
                        // callback
                        doneTyping(el);
                    }, timeout);
                }).on('blur',function(){
                    // If we can, fire the event since we're leaving the field
                    doneTyping(el);
                });
            });
        }
    });
})(jQuery);

$('#example').donetyping(function(){
  $('#example-output').text('Event last fired @ ' + (new Date().toUTCString()));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input type="text" id="example" />
<p id="example-output">Nothing yet</p>

Das wird ausgeführt, wenn:

1. Das Timeout ist abgelaufen, oder
2. Der Benutzer hat die Felder gewechselt (blur Veranstaltung)

(Welches auch immer zuerst kommt)

LÖSUNG:

Hier ist die Lösung. Ausführen einer Funktion, nachdem der Benutzer für eine bestimmte Zeit mit der Eingabe aufgehört hat:

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

Verwendung

$('input').keyup(function() {
  delay(function(){
    alert('Hi, func called');
  }, 1000 );
});

Sie können underscore.js “debounce” verwenden

$('input#username').keypress( _.debounce( function(){<your ajax call here>}, 500 ) );

Das bedeutet, dass Ihr Funktionsaufruf nach 500 ms nach dem Drücken einer Taste ausgeführt wird. Wenn Sie jedoch vor den 500 ms eine andere Taste drücken (ein weiteres Tastendruckereignis wird ausgelöst), wird die vorherige Funktionsausführung ignoriert (entprellt) und die neue wird nach einem neuen 500-ms-Timer ausgeführt.

Für zusätzliche Informationen verwenden Sie _.debounce(func,timer,wahr) würde bedeuten, dass die erste Funktion ausgeführt wird und alle anderen Tastendruckereignisse innerhalb nachfolgender 500-ms-Timer ignoriert würden.

Sie brauchen Entprellung!

Hier ist ein jQuery-Pluginund hier ist alles, was Sie wissen müssen entprellen. Wenn Sie von Google hierher kommen und Underscore den Weg in die JSoup Ihrer App gefunden hat, hat es entprellt direkt hineingebacken!

Sie sollten zuweisen setTimeout zu einer Variablen und verwenden clearTimeout um es auf Tastendruck zu löschen.

var timer="";

$('input#username').keypress(function() {
  clearTimeout(timer);
  timer = setTimeout(function() {
    //Your code here
  }, 3000); //Waits for 3 seconds after last keypress to execute the above lines of code
});

Geige

Hoffe das hilft.

gereinigte Lösung:

$.fn.donetyping = function(callback, delay){
  delay || (delay = 1000);
  var timeoutReference;
  var doneTyping = function(elt){
    if (!timeoutReference) return;
    timeoutReference = null;
    callback(elt);
  };

  this.each(function(){
    var self = $(this);
    self.on('keyup',function(){
      if(timeoutReference) clearTimeout(timeoutReference);
      timeoutReference = setTimeout(function(){
        doneTyping(self);
      }, delay);
    }).on('blur',function(){
      doneTyping(self);
    });
  });

  return this;
};

Es gibt einige einfache Plugin Ich habe genau das gemacht. Es erfordert viel weniger Code als vorgeschlagene Lösungen und ist sehr leicht (~0,6kb)

Zuerst erstellen Sie Bid Objekt als sein kann bumped Jederzeit. Jeden stoßen wird das Feuern verzögern Gebot Rückruf für die nächste angegebene Zeitspanne.

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

Wann Bid Objekt ist fertig, wir müssen bump es irgendwie. Lassen Sie uns Stoßen anhängen keyup event.

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

Was hier passiert ist:

Jedes Mal, wenn der Benutzer die Taste drückt, wird das Gebot für die nächsten 200 ms „verzögert“ (angestoßen). Wenn 200 ms vergehen, ohne dass ein erneuter „Bumping“ erfolgt, wird ein Rückruf ausgelöst.

Außerdem haben Sie 2 zusätzliche Funktionen zum Stoppen des Gebots (wenn der Benutzer z. B. Esc gedrückt oder außerhalb der Eingabe geklickt hat) und zum Beenden und sofortigen Auslösen des Rückrufs (z. B. wenn der Benutzer die Eingabetaste drückt):

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