这个函数中回调是如何执行的？

Question

 const getData = (cb) => { setTimeout( () => { cb({ data: ['there', 'is', 'stuff', 'here'] }) }, 100) } getData( data => { console.log(data); });

这是 javascript 回调的示例。 有人可以让我知道这个函数是如何在 javascript 回调中执行的吗？

这里getData(cb)里面的函数是什么？ 它将如何执行？ 函数如何在cb作为回调传递并返回到console.log

问候。

Answer 1

getData的函数是传递给setTimeout的回调，这是安排将来发生对函数的调用的一种方法。 在这种情况下，它要求回调在大约 100 毫秒后发生。 getData在此之前返回。

setTimeout回调是创建它的上下文中的闭包¹，这意味着即使在getData返回之后它也可以访问cb 。 所以当浏览器的定时器调用回调时，回调可以调用cb 。 对cb的调用使用对象字面量来创建要传递给cb的对象。

在对getData的调用中，作者将一个函数作为cb传递来记录它接收到的数据。

所以：

1. getData被调用，传入一个函数来记录它得到的参数。

2. getData调用setTimeout以在大约 100 毫秒内安排回调，并传入另一个函数供计时器调用。

3. getData返回。

4. 大约 100 毫秒后，浏览器的计时器子系统触发对传递给setTimeout的回调的调用。

5. 该回调创建一个对象并调用cb ，将对象传递给它。

6. 该回调（传递给getData回调）记录它接收到的data对象。

---

¹“关闭”——见： SO ， 我的贫血博客

Answer 2

为了理解代码，您可以通过命名匿名函数来简化它。 一个例子可能是：

function logData(data) {
    console.log(data);
}

const getData = (cb) => {  
    // `cb` is `logData` function when `getData` is called
    function timeoutCallback() {
        var data = { data: ['there', 'is', 'stuff', 'here'] };
        cb(data);
    }
    setTimeout(timeoutCallback, 100)
}

getData(logData);

那有意义吗？

Answer 3

1- 创建第一个全局执行上下文 2- 将调用获取数据函数，然后它将在事件循环内等待 10 秒，然后它将进入执行上下文并打印到控制台。