Здравствуйте, я не могу понять, почему функция debounce работает так, как ожидалось, когда передается непосредственно в событие keyup; но он не работает, если я оберну его внутри анонимной функции.
У меня есть проблема: http://jsfiddle.net/6hg95/1/
EDIT: добавлены все, что я пробовал.
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
и noReturnAnonFunction
не срабатывает функция debounce; но последний function
срабатывает. Я не понимаю, почему это так. Может ли кто-нибудь помочь мне понять это?
ИЗМЕНИТЬ
Итак, причина в том, что debounce не происходит в #exeDebouncedFunc (тот, который вы ссылаетесь) заключается в том, что функция выполняется в области анонимной функции, а другое событие keyup создаст новую функцию в другой анонимной области; тем самым уволив дебютирующую функцию столько раз, сколько вы набираете что-то (вместо того, чтобы стрелять один раз, что было бы ожидаемым поведением, см. beviour #function
)?
Не могли бы вы объяснить разницу между #anonFunction
и #function
. Это опять же вопрос о том, почему один из них работает, а другой нет?
ИЗМЕНИТЬ Хорошо, теперь я понимаю, почему это происходит. И вот почему мне нужно было обернуть его внутри анонимной функции:
Fiddle: 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/>');
}
})();