有人可以解释一下这个与 Js 回调函数有关的代码吗？我对这段代码很困惑，可能是因为我是初学者。问题是：

Posted 2023-02-19

【中文标题】有人可以解释一下这个与 Js 回调函数有关的代码吗？我对这段代码很困惑，可能是因为我是初学者。问题是：

【英文标题】：Can some please explained this code relating to Js Callback function? I am very confused with this code maybe cause I am a beginner. Questions are:

【发布时间】：2021-07-25 09:18:42

【问题描述】：

我对这段代码很困惑，可能是因为我是初学者。无论如何，我的问题是：

1.) 我没有在代码中的任何地方提到视频，但我确实在数组中提到了 video1、video2 和 video3，我还编写了一个名为 getUserVideos 的函数。当我写 getUserVideos(user.userEmail, videos => console.log（视频）； ) 它会自动显示结果吗？

2.) 为什么我需要 console.log(user) 两次？然后再做 getUserVideos(user.userEmail, videos => console.log（视频）； ) ?

console.log('start');

function loginUser(email, password, callback)
    setTimeout(() => 
       callback( userEmail: email ); 
    ,3000);


function getUserVideos(email,callback) 
  setTimeout(() => 
    callback (["video1","video2","video3"]);
  ,2000)


const user = loginUser('[e-mail]', 123456, user => 
  console.log(user);
  getUserVideos(user.userEmail, videos =>
    console.log(videos);
  )
);

console.log(user);

console.log('finish');

非常感谢对代码的完整解释。

【问题讨论】：

“回调”只是一个函数的通用名称，该函数被传递给另一个函数以便稍后执行，通常是在某些处理完成之后。在这种情况下，“稍后时间”是几秒钟的事情，正如调用 setTimeout 所定义的那样，而不是要求我们解释有关此代码的所有内容，你能缩小你不知道的范围吗？理解？逐个操作单步执行代码时，哪一个首先会产生意想不到的结果？

请注意，函数loginUser 没有明确的返回语句，因此在这种情况下javascript 会隐式返回undefined。也就是说，当你执行const user = loginUser，然后通过console.log(user) 将user 的值输出到控制台时，结果显然是undefined。所以你的第二个问题的答案是：你不需要 console.log(user) 两次。一次就足够了，您已经在传递给loginUser（第三个参数）的回调中执行此操作。

这叫continuation-passing style

【参考方案1】：

在a recent Q&A 中，我解释了为什么 Promise 是现代 JavaScript 中异步控制流的事实选择。如您的示例所示，继续传递风格是一个很好的学习练习，但有很多陷阱，对初学者来说非常困难。这是用 promise 和 async-await 标记的，所以我将展示代码在没有延续传递样式的情况下会是什么样子 -

function sleep(ms) 
  return new Promise(r => setTimeout(r, ms))


async function loginUser(email, password) 
    await sleep(3000)
    return  userEmail: email 


async function getUserVideos (email) 
  await sleep(2000)
  return ["video1", "video2", "video3"]


async function main() 
  console.log("start")
  const user = await loginUser("[e-mail]", 123456)
  console.log(user)
  const videos = await getUserVideos(user.userEmail)
  console.log(videos)
  return "finish"


main().then(console.log, console.error)