嵌套的javascript回调函数

时间:2015-05-21 00:53:41

标签: javascript callback

有人可以解释为什么这样做(即延迟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/

我没有正确嵌套回调函数吗?

2 个答案:

答案 0 :(得分:5)

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

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

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

演示:Fiddle

答案 1 :(得分: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();

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