With regard to the use of jQuery Deferred objects, I am puzzled by this question. I would like to ask for advice.

come across an example, I think about it over and over again, but I don"t understand:

function A() {
    var deferred = $.Deferred();
    setTimeout(function() {
        console.log( "A return." );
        deferred.resolve("A return!");
    }, 1000);

    return deferred.promise();
}

function B() {
    var deferred = $.Deferred();
    setTimeout(function() {
        console.log( "B return." );
        deferred.resolve( "B return!");

    }, 2000);

    return deferred.promise();
}

function C() {
    console.log( "C return." );
}

//,
$.when( A() ).then( B ).then( C );
//:
A return.
B return.
C return.

//,
$.when( A() ).then( B() ).then( C() );
//:
C return.
A return.
B return.

just rewrote B-> B (), C-> C (), doesn"t seem to make any difference. Why is the output different?

Mar.30,2021

add two console and you will understand.

function A() {
    console.log('enter A');  // 1
    var deferred = $.Deferred();
    setTimeout(function() {
        console.log( 'A return.' );
        deferred.resolve("A return!");
    }, 1000);

    return deferred.promise();
}

function B() {
    console.log('enter B');  // 2
    var deferred = $.Deferred();
    setTimeout(function() {
        console.log( 'B return.' );
        deferred.resolve( "B return!");

    }, 2000);

    return deferred.promise();
}

function C() {
    console.log( 'C return.' );
}

//,
$.when( A() ).then( B ).then( C );
//:
A return.
B return.
C return.

//,
$.when( A() ).then( B() ).then( C() );
//:
C return.
A return.
B return.
Menu