javascript - 如何使 for 循环等待回调响应值

Question

我有一个调用FireCallBackEvents的点击事件，从那里我传递了所有都是回调的函数数组。现在我想在function a()之后调用function b()，它给出了我通过setTimeout()调用的回调结果。我预计它会延迟给出结果。

现在，在下面的代码中，在调用函数 b 和 c 后调用第一个函数回调的警报。

这只是我的真实代码的示例。

function FireCallBackEvents(){
    generalizeCallBack([a,b,c]);
}

function a(parameter1, parameter2,callback){
    alert("Hello World: " + parameter1 + " : " + parameter2);
    setTimeout(function(){callback("12")},600);
}
function b(parameter1, parameter2,callback){
    alert("Hello World1: " + parameter1 + " : " + parameter2);
    callback("123");
}
function c(parameter1, parameter2, callback){
    alert("Hello World2: " + parameter1 + " : " + parameter2);
    callback("1234");
}

function generalizeCallBack(arrayOfFunctions){
    for(var i = 0; i < arrayOfFunctions.length; i++){
        arrayOfFunctions[i]("1","2",function(we){
            alert(we);
        });
    }
}

Answer 1

您可以使用上一个函数的这个变体，它从您传递的回调函数中递归地调用它:

function generalizeCallBack(arrayOfFunctions){
    if (!arrayOfFunctions.length) return; // nothing to do
    var func = arrayOfFunctions.shift(); // extract function to execute
    func("1","2", function(we){
        alert(we);
        generalizeCallBack(arrayOfFunctions); // recurse with shorter array
    });
}

请注意，这会更改您传递的数组。如果您希望调用者保持其数组完好无损，请使用 slice 而不是 shift:

function generalizeCallBack(arrayOfFunctions){
    if (!arrayOfFunctions.length) return; // nothing to do
    var func = arrayOfFunctions[0]; // get function to execute
    func("1","2", function(we){
        alert(we);
        generalizeCallBack(arrayOfFunctions.slice(1)); // recurse with shorter array
    });
}

由于此版本在每次(递归)调用时都会获取数组副本，因此我们可以通过仅在第一次执行此操作来提高效率(如 @Alnitak 所建议):

function generalizeCallBack(arrayOfFunctions){
    function recurse (arrayOfFunctions) {
        if (!arrayOfFunctions.length) return; // nothing to do
        var func = arrayOfFunctions.shift(); // extract first function
        func("1","2", function(we){
            alert(we);
            recurse(arrayOfFunctions); // recurse with shorter array
        });
    }
    // take copy (slice) of array in order not to alter the caller's array:
    recurse(arrayOfFunctions.slice(0));
}

这样，只获取数组的一份副本。递归部分适用于同一个副本，使其在递归链中的长度更短。

这是相同的，但是写成立即调用的函数表达式:

function generalizeCallBack(arrayOfFunctions){
    (function recurse (arrayOfFunctions) {
        if (!arrayOfFunctions.length) return; // nothing to do
        var func = arrayOfFunctions.shift(); // extract first function
        func("1","2", function(we){
            alert(we);
            recurse(arrayOfFunctions); // recurse with shorter array
        });
        // take copy (slice) of array in order not to alter the caller's array:
    }(arrayOfFunctions.slice(0)));
}