该函数如何执行回调?

时间:2019-07-05 14:13:05

标签: javascript callback

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

getData( data => {  
  console.log(data);
});

这是javascript回调的示例。有人可以让我知道如何将此功能执行到javascript回调中吗?

getData(cb)中的功能是什么?它将如何执行?函数如何在cb中作为回调传递并返回到console.log

致谢。

3 个答案:

答案 0 :(得分:2)

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

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

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

所以:

  1. getData被调用,传入一个函数,该函数将记录其获取的参数。

  2. getData调用setTimeout以安排约100毫秒的回调,并传递另一个函数供计时器调用。

  3. getData返回。

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

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

  6. 那个回调(传递给getData的那个回调)记录它收到的data对象。


¹“关闭”-参见:SOmy anemic blog

答案 1 :(得分:1)

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

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);

这有意义吗?

答案 2 :(得分:-1)

1-创建第一个全局执行上下文 2-get data函数将被调用,然后在事件循环内等待10秒钟,然后将其转到执行上下文并打印到控制台。