Hallo, ich kann anscheinend nicht herausfinden, warum die Entprellungsfunktion wie erwartet funktioniert, wenn sie direkt an ein Keyup-Ereignis übergeben wird. aber es funktioniert nicht, wenn ich es in eine anonyme Funktion einbinde.
Ich habe Probleme mit dem Problem: http://jsfiddle.net/6hg95/1/
EDIT: Alle Dinge hinzugefügt, die ich versucht habe.
HTML
<input id='anonFunction'/>
<input id='noReturnAnonFunction'/>
<input id='exeDebouncedFunc'/>
<input id='function'/>
<div id='output'></div>
JAVASCRIPT
$(document).ready(function(){
$('#anonFunction').on('keyup', function () {
return _.debounce(debounceIt, 500, false); //Why does this differ from #function
});
$('#noReturnAnonFunction').on('keyup', function () {
_.debounce(debounceIt, 500, false); //Not being executed
});
$('#exeDebouncedFunc').on('keyup', function () {
_.debounce(debounceIt, 500, false)(); //Executing the debounced function results in wrong behaviour
});
$('#function').on('keyup', _.debounce(debounceIt, 500, false)); //This is working.
});
function debounceIt(){
$('#output').append('debounced');
}
anonFunction
und noReturnAnonFunction
löst die Entprellungsfunktion nicht aus; aber der letzte function
feuert. Ich verstehe nicht, warum das so ist. Kann mir bitte jemand helfen, das zu verstehen?
BEARBEITEN
Ok, der Grund dafür, dass das Entprellen in #exeDebounceFunc (dem, auf das Sie verweisen) nicht erfolgt, liegt darin, dass die Funktion im Bereich der anonymen Funktion ausgeführt wird und ein anderes Keyup-Ereignis eine neue Funktion in einem anderen anonymen Bereich erstellt. also die entprellte Funktion so oft auslösen, wie Sie etwas eingeben (anstatt einmal zu feuern, was das erwartete Verhalten wäre; siehe unten #function
)?
Können Sie bitte den Unterschied zwischen #anonFunction
und erklären #function
. Geht es hier wieder darum, warum einer von ihnen funktioniert und der andere nicht?
EDIT Ok, jetzt verstehe ich, warum das passiert. Und hier ist, warum ich es in eine anonyme Funktion einwickeln musste:
Geige: http://jsfiddle.net/6hg95/5/
HTML
<input id='anonFunction'/>
<div id='output'></div>
JAVASCRIPT
(function(){
var debounce = _.debounce(fireServerEvent, 500, false);
$('#anonFunction').on('keyup', function () {
//clear textfield
$('#output').append('clearNotifications<br/>');
debounce();
});
function fireServerEvent(){
$('#output').append('serverEvent<br/>');
}
})();
quelle
$('#function').on('keyup', _.debounce(debounceIt, 500, false)); //This is working.
WARUM Debounce eine Funktion zurückgibt. Es ist so schön und macht einfach Sinn ™Denken Sie einfacher
_.debounce gibt eine entprellte Funktion zurück! Also anstatt in Begriffen zu denken
$el.on('keyup'), function(){ _.debounce(doYourThing,500); //uh I want to debounce this }
Sie rufen stattdessen lieber die entprellte Funktion auf
var doYourThingDebounced = _.debounce(doYourThing, 500); //YES, this will always be debounced $el.on('keyup', doYourThingDebounced);
quelle
keyup
und nur eine davon entprellt werden soll?debounce
führt die Funktion nicht aus, sondern gibt eine Funktion mit der darin enthaltenen Debounciness zurück.Ihr
#function
Handler macht also tatsächlich das Richtige, indem er eine Funktion zurückgibt, die von jQuery als Keyup-Handler verwendet wird. Um Ihr#noReturnAnonFunction
Beispiel zu korrigieren, können Sie die entprellte Funktion einfach im Kontext Ihrer Funktion ausführen:$('#noReturnAnonFunction').on('keyup', function () { _.debounce(debounceIt, 500, false)(); // Immediately executes });
Aber das führt einen unnötigen anonymen Funktions-Wrapper um Ihre Entprellung ein.
quelle
Sie können die Entprellungsfunktion wie folgt zurückgeben:
(function(){ var debounce = _.debounce(fireServerEvent, 500, false); $('#anonFunction').on('keyup', function () { //clear textfield $('#output').append('clearNotifications<br/>'); return debounce(); }); function fireServerEvent(){ $('#output').append('serverEvent<br/>'); } })();
quelle
Wenn Sie eine Entprellung mit einem nachlaufenden Verhalten (Konten für den letzten Klick oder wahrscheinlicher die letzte Änderung an einer ausgewählten Eingabe) und ein visuelles Feedback für den ersten Klick / die erste Änderung wünschen, sind Sie im Allgemeinen mit demselben Problem konfrontiert.
Das funktioniert nicht:
$(document).on('change', "#select", function() { $('.ajax-loader').show(); _.debounce(processSelectChange, 1000); });
Dies wäre eine Lösung:
$(document).on('change', "#select", function() { $('.ajax-loader').show(); }); $(document).on('change', "#select", _.debounce(processSelectChange, 1000));
quelle