這個函數中回調是如何執行的？

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 秒，然后它將進入執行上下文並打印到控制台。