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。

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

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

演示：Fiddle

Answer 2

这条线造成了你的麻烦：

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();

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

嵌套的javascript回调函数

2 个答案: