使用thunk来计算异步代码的时间

Question

Kyle Simpson在复数视频上有惊人的class。

在其中一个模块中，他浏览了一段可以安全地异步调用的代码片段，并确保结果将以与执行代码相同的顺序显示给用户。

荣耀中的功能：

    function getFile(file) {
    var text, fn;

    fakeAjax(file, function(response){
        if (fn) fn(response);
        else text = response;
    });

    return function(cb) {
        if (text) cb(text);
        else fn = cb;
    }
 }

我们可以这样称呼它：

我很难理解getFile函数：

1. cb定义在哪里？它是如何被调用的，即cb(text)如果没有在任何地方定义？
2. 当我们调用getFile时，response如何获得一个值？

Answer 1

getFile返回一个匿名函数：

return function(cb) {
    if (text) cb(text);
    else fn = cb;
}

所以var th1 = getFile("file")最终将匿名函数分配给th1的值，因此现在可以使用参数调用th1 - 它变为cb。因此，稍后我们将th1称为：

th1(function(text1) {
...

我们正在传递第二个匿名函数（带参数text1），该函数已分配给cb（＆＃39;回调＆＃39;的简写）。

它起作用的原因是当ajax完成时，它会做两件事之一：

• 如果定义了fn，请使用回复
来调用fn
• 如果没有，则存储响应

相反，当调用返回的匿名函数时，它会执行以下两项操作之一：

• 如果定义了text（即已收到结果），则会使用响应调用回调
• 如果没有，则会将回调（cb）分配给fn

这样，无论先发生了什么 - ajax完成，或者thunk调用，状态都会被保留，然后以第二个为准发生，结果就会被执行。

通过这种方式，＆＃39; thunks＆＃39;可以链接以确保当ajax函数并行发生时，输出方法仅在分配fn值的序列中调用。

我认为部分混乱是变量命名不明确，并且使用自由匿名函数而没有给出他们意图揭示名称。以下应该在功能上等同于更清晰的命名（我认为）：

function getFile(file) {
    var _response, _callback;

    fakeAjax(file, function(response){
        if (_callback) _callback(response);
        else _response = response;
    });

    var onComplete = function(callback) {
        if (_response) callback(_response);
        else _callback = callback;
    }

    return onComplete;
}

然后：

var onFile1Complete = getFile("file1");
var onFile2Complete = getFile("file2");
var onFile3Complete = getFile("file3");

var file3Completed = function(file3Response) {
    output("file3Response");
    output("Complete!");
}

var file2Completed = function(file2Response) {
    output(file2Response);
    onfile3Complete(file3Completed)
}

var file1Completed = function(file1Response) {
    output(file1Response);
    onFile2Complete(file2Completed);
}

onFile1Complete(file1Completed);