Javascript：回调 function 与正常 function 通话

Question

我是 JavaScript 的新手，我对回调与正常的 function 调用以及何时在真实场景中使用回调感到困惑。

有人可以告诉我，以下两种实现方式有何不同？ 或使回调比正常的 function 调用有用的真实案例场景？

使用正常的 function 呼叫

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之前修改它）。 有用的是调用回调的 function 不必知道要调用的确切 function（并且可以根据需要与不同的调用一起使用）。 例如，事件侦听器或对Array.prototype.map的回调仅对回调模式有意义。

但是你展示的场景理想情况下也不会使用——它应该被重组为使用异步/等待：

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

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