Führen Sie die Javascript-Funktion aus, wenn der Benutzer die Eingabe beendet hat, anstatt die Taste zu drücken.

463

Ich möchte eine Ajax-Anfrage auslösen, wenn der Benutzer die Eingabe in ein Textfeld beendet hat. Ich möchte nicht, dass die Funktion jedes Mal ausgeführt wird, wenn der Benutzer einen Buchstaben eingibt, da dies zu VIELEN Ajax-Anforderungen führen würde. Ich möchte jedoch nicht, dass sie auch die Eingabetaste drücken müssen.

Gibt es eine Möglichkeit, um zu erkennen, wann der Benutzer mit der Eingabe fertig ist, und dann die Ajax-Anforderung auszuführen?

Verwenden Sie jQuery hier! Dave

David Zorychta
quelle
21
Ich denke, Sie müssen für uns "Typisierung beenden" definieren.
Surreale Träume
8
Während die Antwort von @Surreal Dreams die meisten Ihrer Anforderungen erfüllt, werden mehrere Anforderungen an den Server gesendet, wenn der Benutzer nach dem angegebenen Zeitlimit erneut mit der Eingabe beginnt. Siehe meine Antwort unten, in der jede XHR-Anforderung in einer Variablen gespeichert und abgebrochen wird, bevor eine neue ausgelöst wird. Dies ist tatsächlich das, was Google in seiner Sofort- Suche tut .
Marko
1
Mögliches Duplikat der Verzögerung
CMS
1
Was ist mit Unschärfe? Ich denke, der Benutzer hat die Eingabe definitiv beendet, wenn das Eingabeelement den Fokus verliert.
Don P
3
Eine einfache Google-Suche hätte Ihnen die einfache Antwort geben können: schier.co/blog/2014/12/08/…
Cannicide

Antworten:

689

Ich gehe also davon aus, dass Sie mit dem Tippen fertig sind und nur eine Weile innehalten, sagen wir 5 Sekunden. Lassen Sie uns in diesem Sinne einen Timer starten, wenn der Benutzer eine Taste loslässt, und ihn löschen, wenn er eine Taste drückt. Ich entschied, dass die fragliche Eingabe #myInput sein wird.

Ein paar Annahmen machen ...

//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms, 5 second for example
var $input = $('#myInput');

//on keyup, start the countdown
$input.on('keyup', function () {
  clearTimeout(typingTimer);
  typingTimer = setTimeout(doneTyping, doneTypingInterval);
});

//on keydown, clear the countdown 
$input.on('keydown', function () {
  clearTimeout(typingTimer);
});

//user is "finished typing," do something
function doneTyping () {
  //do something
}
Surreale Träume
quelle
4
Danke :) Ich fing an, meinen Kommentar zu der Frage zu schreiben und stellte fest, dass ich eine anständige Idee hatte.
Surreale Träume
26
Diese Antwort funktioniert nicht richtig. Sie wird immer nach 5 Sekunden ausgelöst, es sei denn, der Benutzer tippt sehr langsam. Siehe Arbeitslösung unten.
Gehen
3
Wenn Sie hier auf Probleme stoßen, weil der Timer sofort ausgelöst wird, versuchen Sie, Anführungszeichen um den Funktionsaufruf hinzuzufügen: setTimeout ('functionToBeCalled', doneTypingInterval);
Largo
3
Ich sehe einige Kommentare, in denen die Rückruffunktion doneTypingim Beispiel sofort ausgeführt wird. Dies ist normalerweise das Ergebnis eines versehentlichen Einfügens ()nach dem Funktionsnamen. Beachten Sie, dass es lesen sollte setTimeout(doneTyping,nichtsetTimeout(doneTyping(),
Anthony DiSanti
2
@ Jessica, um mit Einfügen zu arbeiten, müssen Sie das Ereignis 'Einfügen' wie folgt hinzufügen: on ('keyup paste',
Sergey
397

Die oben gewählte Antwort funktioniert nicht.

Da typingTimer gelegentlich mehrmals eingestellt wird (zweimaliges Drücken der Taste, bevor der Keydown für schnelle Tipper usw. ausgelöst wird), wird es nicht richtig gelöscht.

Die folgende Lösung löst dieses Problem und ruft X Sekunden nach Abschluss des OP auf. Außerdem ist die redundante Keydown-Funktion nicht mehr erforderlich. Ich habe auch eine Prüfung hinzugefügt, damit Ihr Funktionsaufruf nicht erfolgt, wenn Ihre Eingabe leer ist.

//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms (5 seconds)

//on keyup, start the countdown
$('#myInput').keyup(function(){
    clearTimeout(typingTimer);
    if ($('#myInput').val()) {
        typingTimer = setTimeout(doneTyping, doneTypingInterval);
    }
});

//user is "finished typing," do something
function doneTyping () {
    //do something
}

Und der gleiche Code in der Vanille-JavaScript-Lösung:

//setup before functions
let typingTimer;                //timer identifier
let doneTypingInterval = 5000;  //time in ms (5 seconds)
let myInput = document.getElementById('myInput');

//on keyup, start the countdown
myInput.addEventListener('keyup', () => {
    clearTimeout(typingTimer);
    if (myInput.value) {
        typingTimer = setTimeout(doneTyping, doneTypingInterval);
    }
});

//user is "finished typing," do something
function doneTyping () {
    //do something
}

Diese Lösung verwendet zwar ES6, ist hier jedoch nicht erforderlich. Ersetzen Sie einfach letmit varund die Pfeil - Funktion mit einer regulären Funktion.

gehen
quelle
5
Nun, es kann nützlich sein, die Funktion auch dann aufzurufen, wenn die Eingabe leer ist. Was ist, wenn Sie einige Suchergebnisse löschen möchten (zum Beispiel), wenn die Eingabe wieder leer ist?
Rvighne
7
Ich denke, wir sollten auch die Bedingung berücksichtigen, dass der Benutzer einfach Zeichenfolgen in das Feld einfügt.
Vishal Nair
10
Verwenden $('#myInput').on('input', function() {Sie diese Option, wenn dies mit Kopieren und Einfügen funktionieren soll. Ich sehe den Punkt der Überprüfung nicht, wenn die Eingabe leer ist. Angenommen, er möchte löschen, was er eingegeben hat, wird der Ajax-Aufruf nicht ausgeführt.
Billynoah
3
Warum ist es if ($('#myInput').val)statt if ($('#myInput').val())? Sollte .valeine Funktion sein?
wlnirvana
4
Warum nicht $ (this) .val () verwenden?
JoelFan
76

Es ist nur eine Zeile mit der Entprellungsfunktion von underscore.js :

$('#my-input-box').keyup(_.debounce(doSomething , 500));

Dies sagt im Grunde doSomething 500 Millisekunden, nachdem ich aufgehört habe zu tippen.

Für weitere Informationen: http://underscorejs.org/#debounce

bit2pixel
quelle
5
Scheint auch für jQuery verfügbar zu sein: code.google.com/p/jquery-debounce und github.com/diaspora/jquery-debounce
koppor
63
Es wundert mich, wie die Leute "ONE LINE OF CODE" als kritisch wichtig anpreisen. Großartig. EINE Codezeile, für deren Laden eine 1.1k JS-Datei erforderlich ist. Ich stimme dem nicht zu, weil es eine Lösung ist. Aber die kühne Sache mit einer Zeile ärgert mich und führt zu aufgeblähtem Code.
Wolfie
1
@Wolfie, ich stimme Ihnen in Bezug auf Code Bloat zu, aber Underscore und Lodash sind die beiden wichtigsten Dienstprogramme bei NPM, sodass dies für viele Menschen eine einzeilige Lösung sein kann.
Paul
3
@Paul Ich stimme zu, dass es in Ordnung und tatsächlich vorteilhaft ist, allgemeinen Code zu verwenden, wenn Sie die Bibliotheken für andere Zwecke laden. Das Laden eines K-Codes für eine Zeile ist jedoch nicht effizient. Besonders wenn mobile Plattformen immer weniger unbegrenzte Daten enthalten. Und viele Euroräume zahlen auch für das Internet nach den Daten. Es ist also gut, auf Aufblähen zu achten, wenn dies zumutbar ist.
Wolfie
warum ich bekam:Uncaught ReferenceError: _ is not defined
Wilf
44

Ja, Sie können für jedes Key-Up-Ereignis eine Zeitüberschreitung von beispielsweise 2 Sekunden festlegen, die eine Ajax-Anforderung auslöst. Sie können die XHR-Methode auch speichern und bei nachfolgenden Tastendruckereignissen abbrechen, um noch mehr Bandbreite zu sparen. Hier ist etwas, das ich für ein Autocomplete-Skript von mir geschrieben habe.

var timer;
var x;

$(".some-input").keyup(function () {
    if (x) { x.abort() } // If there is an existing XHR, abort it.
    clearTimeout(timer); // Clear the timer so we don't end up with dupes.
    timer = setTimeout(function() { // assign timer a new timeout 
        x = $.getJSON(...); // run ajax request and store in x variable (so we can cancel)
    }, 2000); // 2000ms delay, tweak for faster/slower
});

Hoffe das hilft,

Marko

Marko
quelle
Ich würde das nicht empfehlen. Der Code löst bei jedem Tastendruck eine API-Anfrage aus . Dann wird die Anforderung abgebrochen, wenn eine andere Taste gedrückt wird. Obwohl diese Lösung verhindert, dass der AJAX-Rückruf ausgelöst wird, während der Benutzer tippt, wird der Server dennoch mit Anforderungen belegt.
lxg
Ixg, nein das wird nicht. Die von ihm verwendete Funktion clearTimeout löscht die vorherigen Timeout-Ereignisse und ruft daher den API-Aufruf auf.
John Smith
@ JohnSmith, ich bin anderer Meinung, es ist wahrscheinlich besser, zuerst den Timer zu löschen, dann zu überprüfen, ob xhr leer ist oder was auch immer Ihr Zustand sein mag, und schließlich den Timer mit dem Ajax-Aufruf
Fleuv
20
var timer;
var timeout = 1000;

$('#in').keyup(function(){
    clearTimeout(timer);
    if ($('#in').val) {
        timer = setTimeout(function(){
            //do stuff here e.g ajax call etc....
             var v = $("#in").val();
             $("#out").html(v);
        }, timeout);
    }
});

vollständiges Beispiel hier: http://jsfiddle.net/ZYXp4/8/

azzy81
quelle
Dies hat bei mir funktioniert. Beachten Sie jedoch, dass beim Verlassen des Textfelds durch den Benutzer kein Keyup-Ereignis angezeigt wird, da der Fokus zu diesem Zeitpunkt verloren gegangen ist. Das Setzen auf Keydown scheint das Problem zu lösen.
Horatius83
12

Beide Top 2 Antworten funktionieren bei mir nicht. Also, hier ist meine Lösung:

var timeout = null;

$('#myInput').keyup(function() {
    clearTimeout(timeout);

    timeout = setTimeout(function() {
        //do stuff here
    }, 500);
});
YSFKBDY
quelle
11

Ich mag die Antwort von Surreal Dream, aber ich habe festgestellt, dass meine Funktion "doneTyping" bei jedem Tastendruck ausgelöst wird, dh wenn Sie sehr schnell "Hallo" eingeben. Anstatt nur einmal zu feuern, wenn Sie aufhören zu tippen, wird die Funktion fünfmal ausgelöst.

Das Problem war, dass die Javascript-Funktion setTimeout die alten Timeouts, die eingestellt wurden, nicht zu überschreiben oder zu beenden scheint, aber wenn Sie es selbst tun, funktioniert es! Also habe ich kurz vor dem setTimeout einen clearTimeout-Aufruf hinzugefügt, wenn der typingTimer gesetzt ist. Siehe unten:

//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms, 5 second for example

//on keyup, start the countdown
$('#myInput').on("keyup", function(){
    if (typingTimer) clearTimeout(typingTimer);                 // Clear if already set     
    typingTimer = setTimeout(doneTyping, doneTypingInterval);
});

//on keydown, clear the countdown 
$('#myInput').on("keydown", function(){
    clearTimeout(typingTimer);
});

//user is "finished typing," do something
function doneTyping () {
    //do something
}

NB Ich hätte dies gerne als Kommentar zu Surreal Dreams Antwort hinzugefügt, aber ich bin ein neuer Benutzer und habe nicht genug Ruf. Es tut uns leid!

Liam Flanagan
quelle
10

Ändern der akzeptierten Antwort, um zusätzliche Fälle wie Einfügen zu behandeln:

//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 2000;  //time in ms, 2 second for example
var $input = $('#myInput');

// updated events 
$input.on('input propertychange paste', function () {
    clearTimeout(typingTimer);
    typingTimer = setTimeout(doneTyping, doneTypingInterval);      
});

//user is "finished typing," do something
function doneTyping () {
  //do something
}
Jecoms
quelle
6

Ich denke nicht, dass ein keyDown-Ereignis in diesem Fall erforderlich ist (bitte sagen Sie mir, warum, wenn ich falsch liege). In meinem (nicht jquery) Skript sieht eine ähnliche Lösung so aus:

var _timer, _timeOut = 2000; 



function _onKeyUp(e) {
    clearTimeout(_timer);
    if (e.keyCode == 13) {      // close on ENTER key
        _onCloseClick();
    } else {                    // send xhr requests
        _timer = window.setTimeout(function() {
            _onInputChange();
        }, _timeOut)
    }

}

Es ist meine erste Antwort auf Stack Overflow, also hoffe ich, dass dies irgendwann jemandem hilft :)

Rafal Pastuszak
quelle
6

Deklarieren Sie die folgende delayFunktion:

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

und dann benutze es:

let $filter = $('#item-filter');
$filter.on('keydown', function () {
    delay(function () {            
        console.log('this will hit, once user has not typed for 1 second');            
    }, 1000);
});    
Fabian Bigler
quelle
Deine Lösung ist fantastisch, Bruder!
Entwickler
1
@ Entwickler Vielen Dank. Ich habe auch eine weitere Antwort hinzugefügt, um ein etwas komplexeres Szenario zu lösen (mehrere Steuerelemente pro Seite).
Fabian Bigler
gute Lösung. Ich benutze dies, aber anstatt Keydown benutze ich das 'Eingabe'-Ereignis
Budyn
Mit dem Keyup-Event hat es für mich großartig funktioniert. Vielen Dank.
Sinan Eldem
6

Späte Antwort, aber ich füge sie hinzu, weil es 2019 ist und dies mit hübschem ES6, keinen Bibliotheken von Drittanbietern, vollständig erreichbar ist. Ich finde, dass die meisten der hoch bewerteten Antworten sperrig und mit zu vielen Variablen belastet sind.

Elegante Lösung aus diesem ausgezeichneten Blog-Beitrag.

function debounce(callback, wait) {
  let timeout;
  return (...args) => {
      const context = this;
      clearTimeout(timeout);
      timeout = setTimeout(() => callback.apply(context, args), wait);
  };
}

window.addEventListener('keyup', debounce( () => {
    // code you would like to run 1000ms after the keyup event has stopped firing
    // further keyup events reset the timer, as expected
}, 1000))
GrayedFox
quelle
1
Dies sollte wirklich die beste Antwort für das Jahr sein
Dark Hippo
4

Genau genommen nein, da der Computer nicht erraten kann, wann der Benutzer mit der Eingabe fertig ist. Sie können natürlich einen Timer beim Hochfahren starten und ihn bei jedem weiteren Tastendruck zurücksetzen. Wenn der Timer abläuft, hat der Benutzer die Timer-Dauer nicht eingegeben - Sie können dies als "abgeschlossene Eingabe" bezeichnen.

Wenn Sie erwarten, dass Benutzer während der Eingabe Pausen einlegen, können Sie nicht wissen, wann sie fertig sind.

(Es sei denn natürlich, Sie können anhand der Daten erkennen, wann sie fertig sind)

sleske
quelle
3

Ich denke, die Lösung ist mit der inputVeranstaltung etwas einfacher :

var typingTimer;
var doneTypingInterval = 500;

$("#myInput").on("input", function () {
    window.clearTimeout(typingTimer);
    typingTimer = window.setTimeout(doneTyping, doneTypingInterval);
});

function doneTyping () {
    // code here
}
Adrien Brunelat
quelle
3

stimme der Antwort von @going zu. Eine andere ähnliche Lösung, die für mich funktioniert hat, ist die folgende. Der einzige Unterschied ist, dass ich .on ("input" ...) anstelle von keyup verwende. Dies erfasst nur Änderungen in der Eingabe. andere Tasten wie Strg, Umschalt usw. werden ignoriert

var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms (5 seconds)

//on input change, start the countdown

$('#myInput').on("input", function() {    
    clearTimeout(typingTimer);
    typingTimer = setTimeout(function(){
        // doSomething...
    }, doneTypingInterval);
});
Grace.io
quelle
3

Ich habe gerade einen einfachen Code gefunden, der darauf wartet, dass der Benutzer die Eingabe beendet:

Schritt 1. Setzen Sie das Zeitlimit auf Null und löschen Sie das aktuelle Zeitlimit, wenn der Benutzer tippt.

Schritt 2.Tigger Clear Timeout für die Variable definieren, bevor das Keyup-Ereignis ausgelöst wird.

Schritt 3. Zeitlimit für die oben deklarierte Variable definieren;

<input type="text" id="input" placeholder="please type" style="padding-left:20px;"/>
<div class="data"></div>

Javascript-Code

var textInput = document.getElementById('input');
var textdata = document.querySelector('.data');
// Init a timeout variable to be used below
var timefired = null;

// Listen for keystroke events
// Init a timeout variable to be used below
var timefired = null;// Listen for keystroke events
textInput.onkeyup = function (event) {
clearTimeout(timefired);
timefired = setTimeout(function () {
    textdata.innerHTML = 'Input Value:'+ textInput.value;
  }, 600);
};
Nevil Saul Blemuss
quelle
1
Die Frage ist bereits beantwortet ... und es ist ziemlich ähnlich
Mixone
3

Ich habe die Suche in meinem Eintrag implementiert und musste sie auf Ajax basieren. Das bedeutet, dass bei jeder Schlüsseländerung die gesuchten Ergebnisse aktualisiert und angezeigt werden sollten. Dies führt dazu, dass so viele Ajax-Anrufe an den Server gesendet werden, was nicht gut ist.

Nach einiger Arbeit habe ich versucht, den Server zu pingen, wenn der Benutzer aufhört zu tippen.

Diese Lösung hat bei mir funktioniert:

$(document).ready(function() {
    $('#yourtextfield').keyup(function() {
        s = $('#yourtextfield').val();
        setTimeout(function() { 
            if($('#yourtextfield').val() == s){ // Check the value searched is the latest one or not. This will help in making the ajax call work when client stops writing.
                $.ajax({
                    type: "POST",
                    url: "yoururl",
                    data: 'search=' + s,
                    cache: false,
                    beforeSend: function() {
                       // loading image
                    },
                    success: function(data) {
                        // Your response will come here
                    }
                })
            }
        }, 1000); // 1 sec delay to check.
    }); // End of  keyup function
}); // End of document.ready

Sie werden feststellen, dass bei der Implementierung kein Timer verwendet werden muss.

Ata ul Mustafa
quelle
2

Dies ist der einfache JS-Code, den ich geschrieben habe:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head><title>Submit after typing finished</title>
<script language="javascript" type="text/javascript">
function DelayedSubmission() {
    var date = new Date();
    initial_time = date.getTime();
    if (typeof setInverval_Variable == 'undefined') {
            setInverval_Variable = setInterval(DelayedSubmission_Check, 50);
    } 
}
function DelayedSubmission_Check() {
    var date = new Date();
    check_time = date.getTime();
    var limit_ms=check_time-initial_time;
    if (limit_ms > 800) { //Change value in milliseconds
        alert("insert your function"); //Insert your function
        clearInterval(setInverval_Variable);
        delete setInverval_Variable;
    }
}

</script>
</head>
<body>

<input type="search" onkeyup="DelayedSubmission()" id="field_id" style="WIDTH: 100px; HEIGHT: 25px;" />

</body>
</html>
Alfredo Lingoist Jr.
quelle
1

Mit dem Ereignis onblur können Sie feststellen, wann das Textfeld den Fokus verliert: https://developer.mozilla.org/en/DOM/element.onblur

Dies ist nicht dasselbe wie "hört auf zu tippen", wenn Sie sich für den Fall interessieren, dass der Benutzer eine Reihe von Dingen eingibt und dann dort sitzt, wobei das Textfeld immer noch fokussiert ist.

Zu diesem Zweck würde ich vorschlagen, ein setTimeout mit dem Ereignis onclick zu verknüpfen und davon auszugehen, dass der Benutzer nach x Zeit ohne Tastenanschläge die Eingabe beendet hat.

Mike Ruhlin
quelle
1

Warum nicht einfach onfocusout verwenden?

https://www.w3schools.com/jsreF/event_onfocusout.asp

Wenn es sich um ein Formular handelt, verlassen sie immer den Fokus jedes Eingabefelds, um auf die Schaltfläche "Senden" zu klicken, damit Sie wissen, dass keine Eingabe den Aufruf des Ereignishandlers "onfocusout" verpasst.

Kaffee
quelle
1
onfocusout hatte schlechte Unterstützung, als die Frage gestellt wurde (vor fast 7 Jahren), und auch der Effekt mit onfocusout wäre etwas anders. Sie müssten warten, bis der Benutzer den Fokus auf das Element belässt, während es bei der Timeout- / Debounce-Lösung "ausgelöst" wird, sobald der Benutzer aufhört zu tippen und der Benutzer den Fokus nicht wechseln muss. Ein Anwendungsfallbeispiel wäre eines dieser Registrierungsformulare, bei denen, wenn der Benutzer einen potenziellen Benutzernamen nicht mehr eingibt, rechts neben dem Formularfeld ein Häkchen oder "X" angezeigt wird, das angibt, dass der Name verfügbar ist.
David Zorychta
Wenn die Suchleiste scharfgestellt ist, muss niemand nach draußen kommen. Nach einiger Zeit wird das Ergebnis direkt angezeigt, da kein Öffnen mehr
eingegeben wird
1

Wenn der Benutzer sich vom Feld entfernen muss, können wir "onBlur" anstelle von Onchange in Javascript verwenden

  <TextField id="outlined-basic"  variant="outlined" defaultValue={CardValue} onBlur={cardTitleFn} />

Wenn dies nicht erforderlich ist, ist die Einstellung des Timers die gute Option.

Jayabharathi Palanisamy
quelle
0

Sobald Sie den Fokus auf das Textfeld erkannt haben, führen Sie bei der Eingabe eine Zeitüberschreitungsprüfung durch und setzen Sie sie jedes Mal zurück, wenn sie ausgelöst wird.

Wenn das Zeitlimit abgelaufen ist, führen Sie Ihre Ajax-Anfrage aus.

ocodo
quelle
0

Wenn Sie nach einer bestimmten Länge suchen (z. B. nach einem Postleitzahlfeld):

$("input").live("keyup", function( event ){
if(this.value.length == this.getAttribute('maxlength')) {
        //make ajax request here after.
    }
  });
Jason
quelle
Keine schlechte Idee, vor dem Senden der Ajax-Anfrage eine eingeschränkte Validierung durchzuführen.
Chim
0

Ich bin mir nicht sicher, ob meine Bedürfnisse etwas seltsam sind, aber ich brauchte etwas Ähnliches und das habe ich letztendlich verwendet:

$('input.update').bind('sync', function() {
    clearTimeout($(this).data('timer'));            
    $.post($(this).attr('data-url'), {value: $(this).val()}, function(x) {
        if(x.success != true) {
            triggerError(x.message);    
        }
    }, 'json');
}).keyup(function() {
    clearTimeout($(this).data('timer'));
    var val = $.trim($(this).val());
    if(val) {
        var $this = $(this);
        var timer = setTimeout(function() {
            $this.trigger('sync');
        }, 2000);
        $(this).data('timer', timer);
    }
}).blur(function() {
    clearTimeout($(this).data('timer'));     
    $(this).trigger('sync');
});

Was mir erlaubt, solche Elemente in meiner Anwendung zu haben:

<input type="text" data-url="/controller/action/" class="update">

Welche werden aktualisiert, wenn der Benutzer "fertig tippt" (2 Sekunden lang keine Aktion) oder in ein anderes Feld wechselt (Unschärfe aus dem Element heraus)

Paolo Bergantino
quelle
0

Wenn Sie warten müssen, bis der Benutzer mit der Eingabe fertig ist, verwenden Sie einfach Folgendes:

$(document).on('change','#PageSize', function () {
    //Do something after new value in #PageSize       
});

Vollständiges Beispiel mit Ajax-Aufruf - dies funktioniert für meinen Pager - Anzahl der Elemente pro Liste:

$(document).ready(function () {
    $(document).on('change','#PageSize', function (e) {
        e.preventDefault();
        var page = 1;
        var pagesize = $("#PageSize").val();
        var q = $("#q").val();
        $.ajax({
            url: '@Url.Action("IndexAjax", "Materials", new { Area = "TenantManage" })',
            data: { q: q, pagesize: pagesize, page: page },
            type: 'post',
            datatype: "json",
            success: function (data) {
                $('#tablecontainer').html(data);
               // toastr.success('Pager has been changed', "Success!");
            },
            error: function (jqXHR, exception) {
                ShowErrorMessage(jqXHR, exception);
            }
        });  
    });
});    
Miroslav Siska
quelle
0

Mehrere Timer pro Seite

Alle anderen Antworten funktionieren nur für ein Steuerelement ( meine andere Antwort enthalten). Wenn Sie mehrere Steuerelemente pro Seite haben (z. B. in einem Warenkorb), wird nur das letzte Steuerelement aufgerufen, bei dem der Benutzer etwas eingegeben hat . In meinem Fall ist dies sicherlich nicht das gewünschte Verhalten - jedes Steuerelement sollte seinen eigenen Timer haben.

Um dies zu lösen, müssen Sie lediglich eine ID an die Funktion übergeben und ein timeoutHandles-Wörterbuch wie im folgenden Code verwalten:

Funktionserklärung:

var delayUserInput = (function () {
    var timeoutHandles = {};    
    return function (id, callback, ms) {        
        if (timeoutHandles[id]) {
            clearTimeout(timeoutHandles[id]);
        }

        timeoutHandles[id] = setTimeout(callback, ms);             
    };
})();

Funktionsnutzung:

  delayUserInput('yourID', function () {
     //do some stuff
  }, 1000);
Fabian Bigler
quelle
0

Einfach und leicht zu verstehen.

var mySearchTimeout;
$('#ctl00_mainContent_CaseSearch').keyup(function () {
   clearTimeout(mySearchTimeout);
   var filter = $(this).val();
   mySearchTimeout = setTimeout(function () { myAjaxCall(filter); }, 700);
   return true;
});
Juls
quelle
0

Zum Übergeben von Parametern an Ihre Funktion zusammen mit der ES6-Syntax.

$(document).ready(() => {
    let timer = null;
     $('.classSelector').keydown(() => {
     clearTimeout(timer); 
     timer = setTimeout(() => foo('params'), 500);
  });
});

const foo = (params) => {
  console.log(`In foo ${params}`);
}
Ajinkya
quelle
-2

Wow, sogar 3 Kommentare sind ziemlich richtig!

  1. Eine leere Eingabe ist kein Grund, einen Funktionsaufruf zu überspringen, z. B. entferne ich den Abfallparameter vor der Umleitung aus der URL

  2. .on ('input', function() { ... });sollte Trigger verwendet werden keyup, pasteund changeEreignisse

  3. definitiv .val()oder .valuemuss verwendet werden

  4. Sie können die $(this)Inside-Event-Funktion verwenden, anstatt #idmit mehreren Eingaben zu arbeiten

  5. (meine Entscheidung) Ich verwende die anonyme Funktion anstelle von doneTypingin setTimeout, um $(this)von n.4 aus leicht darauf zugreifen zu können, aber Sie müssen sie zuerst wie speichernvar $currentInput = $(this);

BEARBEITEN Ich sehe, dass einige Leute Anweisungen nicht verstehen, ohne die Möglichkeit, fertigen Code zu kopieren und einzufügen. Hier bist du

var typingTimer;
//                  2
$("#myinput").on('input', function () {
    //             4     3
    var input = $(this).val();
    clearTimeout(typingTimer);
    //                           5
    typingTimer = setTimeout(function() {
        // do something with input
        alert(input);
    }, 5000);      
});
vladkras
quelle
Wie beantwortet dies die Frage?
Thomas Orlita
@ThomasOrlita Diese Antwort ergänzt 3 der am besten bewerteten Antworten. Schauen Sie sich das akzeptierte an: 1. Es unterstützt nicht paste, es wird nicht verwendet thisusw. (Ich denke, es ist wichtig, aber ich möchte mich nicht in Tonnen von Kommentaren
verlieren
1
Dies beantwortet die Frage nicht. Wenn Sie eine andere Antwort kommentieren möchten, gibt es ein Kommentarsystem (ich verwende es gerade!)
GrayedFox