使用 jQuery 的 Deferred 管理同步和异步 JavaScript 函数

Question

我需要通过 Socket.IO（客户端）在 websocket 上运行一系列调用。因为我没有使用 $.ajax，所以 jQuery 的延迟函数也不会集成，我必须手动处理 Promise。对于每个 websocket 调用，我都会传递一个回调，我很快就会看到这个项目是如何失控的。这是我的 websocket 调用如何工作的简化示例（不包括所有连接处理代码）：

function js2node(nodeFunction, data, callback){
    socket.emit('incoming', nodeFunction, data, callback);
}

function sampleServerCall(){
    js2node('sampleCall', 'something', 'sampleCallback');
}

function sampleCallback(json){
    // Handle data
}

sampleServerCall();

我将与服务器进行大量对话，所有调用都是异步的，但有些调用需要按特定顺序返回。输入 jQuery 延迟。这是一些工作代码：

var deferredArray = [];

$(function(){
    $.when(  // Any order
        getData1(),
        getData2()
    ).then(function(){  // Must have responses from dataCallback1 and dataCallback2 before doing this...
        $.when(  // Any order
            getData3(),
            getData4()
        ).then(function(){  // Must have responses from dataCallback3 and dataCallback4 before doing this...
            getData5();
        });
    });
});

function getData1(){
    js2node('data1', 'something', 'dataCallback1');
    deferredArray[0] = new $.Deferred();
    return deferredArray[0].promise();
}

function getData2(){
    js2node('data2', 'something', 'dataCallback2');
    deferredArray[1] = new $.Deferred();
    return deferredArray[1].promise();
}

function getData3(){
    js2node('data3', 'something', 'dataCallback3');
    deferredArray[2] = new $.Deferred();
    return deferredArray[2].promise();
}

function getData4(){
    js2node('data4', 'something', 'dataCallback4');
    deferredArray[3] = new $.Deferred();
    return deferredArray[3].promise();
}

function getData5(){
    js2node('data5', 'something', 'dataCallback5');
    deferredArray[4] = new $.Deferred();
    return deferredArray[4].promise();
}

function dataCallback1(json){
    // Handle data
    deferredArray[0].resolve();
}

function dataCallback2(json){
    // Handle data
    deferredArray[1].resolve();
}

function dataCallback3(json){
    // Handle data
    deferredArray[2].resolve();
}

function dataCallback4(json){
    // Handle data
    deferredArray[3].resolve();
}

function dataCallback5(json){
    // Handle data
    deferredArray[4].resolve();
}

如您所见，我仍然坚持使用 when/then 的嵌套回调方式，并且随着我添加功能，嵌套可能会更深入。 Deferred 对我来说是一个新概念，但我读过它应该在这种情况下有所帮助。我觉得必须有比我目前正在做的更好的方法。谁能帮我更有效地进行设置？

Answer 1

您可以使用 .then 做更多事情：

$(function(){
    $.when(
        doSock('data1', 'something'),
        doSock('data2', 'something')
    ).then(function(data1, data2){
        return $.when(
            doSock('data3', 'something'),
            doSock('data4', 'something')
        );
    }).then(function(data3, data4){
        return doSock('data5', 'something');
    });
});

这样你的嵌套永远不会比这更深。

（我使用了adeno的辅助方法）

Answer 2

使用更好的辅助函数肯定会有所帮助，但您仍然必须使用 $.when 和 $.then 来构造调用，以便以正确的顺序执行它们

function doSock(nodeFunction, data) {
    var def = new $.Deferred();
    socket.emit('incoming', nodeFunction, data, function(received) {
        def.resolve(received)
    });
    return def.promise();
}

$(function(){
    $.when(
        doSock('data1', 'something'),
        doSock('data2', 'something')
    ).then(function(data1, data2){
        $.when(
            doSock('data3', 'something'),
            doSock('data4', 'something')
        ).then(function(data3, data4){
            doSock('data5', 'something');
        });
    });
});