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回调是在创建它的上下文中的一个 closure ¹，这意味着即使返回了cb，它也可以访问getData。因此，当浏览器的计时器调用回调时，回调可以调用cb。对cb的调用使用对象文字来创建要传递给cb的对象。

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

所以：

getData被调用，传入一个函数，该函数将记录其获取的参数。
getData调用setTimeout以安排约100毫秒的回调，并传递另一个函数供计时器调用。
getData返回。
大约100毫秒后，浏览器的计时器子系统触发对传递给setTimeout的回调的调用。
该回调创建一个对象并调用cb，将该对象传递给它。
那个回调（传递给getData的那个回调）记录它收到的data对象。

¹“关闭”-参见：SO，my anemic blog

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-get data函数将被调用，然后在事件循环内等待10秒钟，然后将其转到执行上下文并打印到控制台。

该函数如何执行回调？

3 个答案: