Não consigo obter o event.currentTarget
ao usar addEventListener
com _.debounce()
.
Se a propriedade for alterada na referência do objeto de evento que está fora do escopo do Underscore. Se você usar uma lib como o jQuery, isso pode ajudar, pois eles criam um objeto de evento sintético ao qual você deve poder fazer referência sem problemas.
Eu não acho que você vai contornar isso. event
é reutilizado à medida que se propaga no DOM, com currentTarget
mudando para cada elemento com um ouvinte. violino
Passar um segundo parâmetro pode contornar isso. violino
var debounced = _.debounce(fn, 50);
document.querySelector('.debounced-input').addEventListener('keyup', function(event) {
debounced(event, event.currentTarget);
});
Sim, isso está fora do escopo do sublinhado. Considere um micro framework de eventos DOM como gator
Aqui está um exemplo disso trabalhando com jQuery.
Eu ainda posso pegar o elemento que currentTarget
normalmente tem com this
; Acabei de abrir este problema para ter certeza de que o que estou vendo é realmente o comportamento esperado.
@jridgewell alguma ideia de como contornar isso em um React onChange. quando eu não uso debounce eu consigo acessar o evento correto na minha função onChange mas quando eu uso _.debounce
eu perco o event
correto – veja abaixo
// in my render
<input onChange={ _.debounce(this.updateNote.bind(this), 500) } />
// my change handler
updateNote(event) {
// undefined on event.target, get lodash event not <input/> event target
const note = event.target.value
this.sendNote({ note })
}
Veja minha segunda sugestão .
Isso é uma questão de implementação. Você precisa persistir o evento. onChange deve chamar um persist e ENTÃO passar o evento persisted para o manipulador debounced:
onChange_persist = (e) =>
{
e.persist();
e.onChange_debounced(e);
}
Comentários muito úteis
@jridgewell alguma ideia de como contornar isso em um React onChange. quando eu não uso debounce eu consigo acessar o evento correto na minha função onChange mas quando eu uso
_.debounce
eu perco oevent
correto – veja abaixo