• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

196
Views
Vue.js: ¿por qué mi función de rebote no funciona con la función de flecha?

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í.

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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: () => {...}
almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error