嵌套 javascript 回调函数

Question

有人能解释一下为什么会这样吗（即延迟 1 在延迟 2 之前执行）：

function testCallBack() {
    one(two);
}

function one(callback) {
    setTimeout(function () {
        alert("delay 1");
        callback();
    }, 2000);
}

function two() {
    setTimeout(function () {
        alert("delay 2")
    }, 1000);
}

testCallBack();

http://jsfiddle.net/z71gkpfg/

但这不是（延迟 2 以某种方式在延迟 1 之前执行）：

function testCallBack() {
    one(two(three));
}

function one(callback) {
    setTimeout(function () {
        alert("delay 1");
        callback();
    }, 3000);
}

function two(callback) {
    setTimeout(function () {
        alert("delay 2");
        callback();
    }, 2000);
}
function three(){
     setTimeout(function () {
        alert("delay 3");
    }, 1000);
}
testCallBack();

https://jsfiddle.net/511nLm95/

我是否没有正确嵌套我的回调函数？

Answer 1

这条线给你带来了麻烦：

one(two(three));

这里你不只是传递two()的函数名作为回调，你实际执行函数并传递返回值。

你可以在不改变语义的情况下像这样重写语句：

var resultOfTwo = two(three);
one(resultOfTwo);

相反，实际上只使用两个作为回调：

function testCallBack() {
    one(two, three);
}

function one(callback, secondCallback) {
    setTimeout(function () {
        alert("delay 1");
        callback(secondCallback);
    }, 3000);
}

function two(secondCallback) {
    setTimeout(function () {
        alert("delay 2");
        secondCallback();
    }, 2000);
}
function three(){
     setTimeout(function () {
        alert("delay 3");
    }, 1000);
}
testCallBack();

你明白为什么这个解决方案有效吗？

Answer 2

您需要将函数引用传递给 one。

所以这里的解决方案可能是将匿名函数作为回调传递给 one，它将调用 two 并使用 three 作为回调引用。

function testCallBack() {
    one(function(){
        two(three);
    });
}

演示：Fiddle

嵌套 javascript 回调函数

Nested javascript callback functions

javascript

callback