Aquí está mi función de rebote:
function debounce(fn, wait = 1500) { let timeout; return function (...args) { if (timeout) clearTimeout(timeout); let context = this; timeout = setTimeout(function () { fn.apply(context, ...args); }, wait); }; } Aquí está mi method en el componente:
methods: { onKeyUp() { if(this.q.length) this.isLoading = true; // show loading spinner return debounce(() => this.querySearch())() }, Así que tengo que ejecutar la llamada de rebote con un conjunto adicional de () que tiene sentido, porque el rebote devuelve una función. Ahora, si lo cambio a esto:
methods: { onKeyUp: debounce(function() { this.querySearch() }) No entiendo por qué esto funciona: debounce devuelve una función. Esperaría que cuando se onKeyUp , se ejecute debounce , que solo devuelve una función, sin siquiera ejecutarla. ¿Ejecuta implícitamente la función devuelta con esta sintaxis? ¿Por qué?
Además, ¿por qué necesita ser una función sin flecha en el segundo ejemplo? Sé que en el primer ejemplo desea una flecha fn porque desea this apunte al contexto del componente, pero no tengo claro por qué el uso de esta sintaxis de clave-valor lo desglosa aquí.
debounce(function() {...}) es una expresión. onKeyUp se asigna al resultado de su evaluación. El resultado de la llamada debounce es una función antirrebote, al igual que onKeyUp .
Esperaría que cuando se active onKeyUp, se ejecute el rebote
Así no es como funciona JavaScript. Dado var foo = 1 + 1 , 1 + 1 se evalúa ansiosamente a 2, no en el momento en que se accede a la variable foo . La única posibilidad de que el código se evalúe de forma perezosa es envolverlo dentro de una función. Esto es lo que sucede en caso de debounce . El código dentro de function() {...} se llama después de un retraso cuando se llama a la función antirrebote. debounce se llama cuando se llama.
Además, ¿por qué necesita ser una función sin flecha en el segundo ejemplo?
Porque esta es la única forma en que la función puede obtener una instancia de componente como this . Dado que las flechas no tienen su propio contexto, this se referiría al contexto externo con una flecha, que es el contexto del módulo en el que se define el componente:
onKeyUp: debounce(() => {...})y
onKeyUp: () => {...}