jquery step by step with $.Deferred()

Question

Here a test code:

var dfd_1 = $.Deferred(),
    dfd_2 = $.Deferred(),
    dfd_3 = $.Deferred();

function test(content, waitTime, dfd) {
    console.log(content + ' begin');
    setTimeout(function() {
        console.log(content + ' end');
        dfd.resolve();
    }, waitTime);
    return dfd.promise();
}

$.when(test('first', 2000, dfd_1), test('second', 4000, dfd_2), test('third', 6000, dfd_3))
.then(function() {
    console.log('all done');
});

The result from console is:

first begin 
second begin
third begin

first end
second end
third end

all done

3 function starts and after step by step ends But i need result like this (start end, start end...):

first begin
first end

second begin
second end

third begin
third end

all done

How to make $.Deferred work step by step? help me please with solution

@dev-null yes, `first start first end, second start - second end` but without callbacks, how to make it with Deferred — bsbak, Sep 23 '15 at 13:37

score 0 · Accepted Answer · answered Sep 23 '15 at 13:42

0

Use then():

test('first', 2000, dfd_1)
    .then(function() {
        return test('second', 4000, dfd_2);
    })
    .then(function() {
        return test('third', 6000, dfd_3);
    })
    .then(function() {
        console.log('all done');
    })
;

Fiddle: http://jsfiddle.net/saj5stt9/

answered Sep 23 '15 at 13:42

Nikos Paraskevopoulos

39,514
12
85
90

but this doesn't allow simultaneous calls whereas proper use of `$.when` does. http://jsfiddle.net/dr3w9byk/ – charlietfl Sep 23 '15 at 13:54
OP specifically requires serial execution "How to make $.Deferred work step by step?". And it is a valid use case if promises depend on results from previous calls. – Nikos Paraskevopoulos Sep 23 '15 at 14:22
ok...i interpreted as wanting results in order since that's how it was set up in `$.when` – charlietfl Sep 23 '15 at 14:37

jquery step by step with $.Deferred()

1 Answers1