Javascript:回调函数与普通函数调用

Question

我是 JavaScript 的新手，我对回调与普通函数调用以及何时在实际场景中使用回调感到困惑。

谁能告诉我，以下两种实现方式之间有何不同？还是使回调比普通函数调用更有用的真实案例场景？

使用正常的函数调用

function getDetails(){
    setTimeout(() => {
        console.log("DETAILS")
    }, 2000);
}

function getUser(){
    setTimeout(() => {
        console.log("USER");
        getDetails(); // Normally calling the function
    }, 3000);
}

getUser();

使用回调

function getDetails(){
    setTimeout(() => {
        console.log("DETAILS")
    }, 2000);
}

function getUser(callback){
    setTimeout(() => {
        console.log("USER");
        callback(); // Calling the function
    }, 3000);
}

getUser(getDetails);

Answer 1

您展示的两个示例在技术上没有区别(假设您不会在调用 getDetails 之前对其进行修改)。有用的是调用回调的函数不必知道要调用的确切函数(并且可以根据需要与不同的函数一起使用)。例如，事件监听器或对 Array.prototype.map 的回调仅对回调模式有意义。

但是您展示的场景理想情况下不会使用任何一个 - 它应该被重组为使用 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

我添加了更多示例内容来说明真实用例。