0
166
ViewsJavascript Debounce no borra su cola del componente vue
Estoy usando el método de rebote de aquí https://www.freecodecamp.org/news/javascript-debounce-example/
function debounce(func, timeout = 300){ let timer; return (...args) => { clearTimeout(timer); timer = setTimeout(() => { func.apply(this, args); }, timeout); }; } function saveInput(){ console.log('Saving data'); } const processChange = debounce(() => saveInput()); y quiero incluir en una biblioteca que tenemos, así que en common.js tengo:
export default { otherStuff, debounce(func, timeout = 300) { let timer; return (...args) => { clearTimeout(timer); timer = setTimeout(() => { func.apply(this, args); }, timeout); }; }, en vue.js tengo un cuadro de texto que tiene un evento @keyup="searchboxChange()"
y en la sección de métodos:
import common from "@/assets/js/Service/Common"; ... stuff removed for brevity methods: { searchboxChange(){ common.debounce(() => this.filterChanged(), 1000)(); }, } Tuve que incluir () al final del método de rebote, de lo contrario, en realidad no se disparó. Sin embargo, aunque rebota perfectamente, cuando el tiempo de espera expira, todos los eventos se disparan. Entonces, si mi búsqueda fuera "HOLA", vería 5 solicitudes, todas disparadas al mismo tiempo, ya que this.filterChanged() fue llamado 5 veces.
Estoy seguro de que es algo simple con el alcance de la variable de tiempo de espera, porque agregar un archivo console.log en el método de rebote muestra que el temporizador no está definido cada vez.
2 answers
Answer question0
Debe eliminar el rebote del método del componente; de lo contrario, invocará varias funciones eliminadas desde dentro de su método del componente.
Algo como esto debería funcionar
methods: { // ... searchboxChange: common.debounce(function() { this.filterChanged(); }, 1000) } Observe el uso de la function en lugar de la sintaxis de función abreviada. Deberá hacer esto para garantizar el alcance léxico correcto de this
0
En primer lugar, como siempre, gracias a todos los que aportaron una solución. Sin embargo, ninguno superó el "esto" no es el alcance correcto.
La solución fue establecer la función en created. (fuente: https://forum.vuejs.org/t/lodash-debounce-not-working-when-placed-inside-a-method/86334/4 )
que (en caso de que el enlace se corte) está diciendo efectivamente
mueva la parte que necesita para eliminar el rebote en su propio método y eliminar ese rebote (como lo hizo en el codepen para el primer método).
Luego puede llamar al método rebotado desde el método del controlador de eventos.
También es mejor eliminar el rebote de cada método de instancia de forma dinámica durante la creación, de lo contrario, las instancias de componentes que tienen la misma función de rebote y que pueden conducir a un comportamiento de rebote inestable:
y su ejemplo de código:
created() { this.updateForm = _.debounce(this.updateForm, 500) }, methods: { triggerUpdate(event){ // perform some action before debouncing this.updateForm(event) } , updateForm: (event){ console.log('in update') }entonces para mi caso:
created() { this.searchboxChange = common.debounce(this.filterChanged, 1000) },sí, eso es literalmente.
resultado: 
solo una llamada de red ahora.