Soy nuevo en JavaScript y estoy muy confundido con las devoluciones de llamada frente a las llamadas a funciones normales y cuándo usar las devoluciones de llamada en un escenario real.
¿Puede alguien decirme cómo las dos implementaciones a continuación son diferentes entre sí? o un escenario de caso real que hace que una devolución de llamada sea más útil que una llamada de función normal?
Usando la llamada de función normal
function getDetails(){ setTimeout(() => { console.log("DETAILS") }, 2000); } function getUser(){ setTimeout(() => { console.log("USER"); getDetails(); // Normally calling the function }, 3000); } getUser();
Uso de devolución de llamada
function getDetails(){ setTimeout(() => { console.log("DETAILS") }, 2000); } function getUser(callback){ setTimeout(() => { console.log("USER"); callback(); // Calling the function }, 3000); } getUser(getDetails);
No hay diferencia técnicamente en los dos ejemplos que mostró (suponiendo que no modificará getDetails
antes de que se llame). Lo que lo hace útil es que la función que llama a la devolución de llamada no tiene que saber la función exacta para llamar (y podría usarse con diferentes según sea necesario). Por ejemplo, algo como un detector de eventos o la devolución de llamada a Array.prototype.map
solo tiene sentido con el patrón de devolución de llamada.
Pero el escenario que mostró idealmente tampoco lo usaría; debería reestructurarse para usar async/await:
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms)) async function getDetails (user) { await sleep(2000) console.log('DETAILS', user) return 'some details' } async function getUser (userId) { await sleep(3000) console.log('USER', userId) return 'some user' } async function main () { const user = await getUser(123) const details = await getDetails(user) console.log('got these details:', details) } main().catch(e => console.error('Failed to fetch data:', e)) // If you are in an environment that supports top-level await, // you can just use `await main()` instead
Agregué algunos ejemplos más para ilustrar un caso de uso real.