Jquery - Chain functions with deferred and promises but without setTimeout

Question

I need to execute 2 functions one after the other with the stuff in function "A" fully completing before the stuff in function "B" executes...

I can't find an example that is not using setTimeout .. which is strange ...

I have the following example below ( from here ) , is it supposed to work ?? How could I test if it is working ? What dummy code could I use to simulate the part "//do stuff with SharePoint JSOM" taking 5 secs to 30 secs ,say .

var a = function() {
var defer = $.Deferred();

//do stuff with SharePoint JSOM

console.log('a() called');

return defer;
};

var b = function() {
var defer = $.Deferred();

console.log('b() called');


return defer;
};



a().then(b);

If b doesn't do anything asynchronous, it should not return a deferred (or promise). then also works with synchronous callbacks. — Bergi
– Bergi, Commented Aug 23, 2016 at 12:20
according to what I tested and read you can't use setTimeout as a dummy since it simply does not halt the calling code. And I can't use preset delays. — Zertix.net
– Zertix.net, Commented Aug 23, 2016 at 12:24
Yes, deferreds or JSOM don't halt the calling code either, that's their whole point. — Bergi
– Bergi, Commented Aug 23, 2016 at 12:24
HI I don't mean halt the code completely. Just halt the execution of function B until function A executes, ( without using setTimeout ), Are you saying this is not the intended purpose of Jquery deferred/promises ? — Zertix.net
– Zertix.net, Commented Aug 23, 2016 at 12:28

eisbehr · Accepted Answer · 2016-08-23 20:11:05Z

4

Simple use a promise (vanilla JS) and chain them with then.

function a() {
    return new Promise(function(resolve) {
        console.log("wait two seconds ...");

        // this timeout is only here for demo purpose ;)
        setTimeout(function() {
            console.log("A");
            resolve();
        }, 2000);
    });
}

function b() {
    console.log("B");
}

a().then(b);

If you want to use jQuery deffered its nearly the same.

function a() {
    var defer = $.Deferred();
    
    console.log("wait two seconds ...");

    // this timeout is only here for demo purpose ;)
    setTimeout(function() {
        console.log("A");
        defer.resolve();
    }, 2000);
    
    return defer;
}

function b() {
    console.log("B");
}

a().then(b);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

edited Aug 23, 2016 at 20:11

answered Aug 23, 2016 at 12:23

eisbehr

12.5k8 gold badges42 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Zertix.net Over a year ago

Hi, I am aware of this way, But was just wondering to get a working example using jquery promises...

Zertix.net Over a year ago

But doesn't setTimeout fix a set timeout of 2000 ms ? I don't want a fixed timeout. I want B to execute whenever A finishes naturally.

eisbehr Over a year ago

setTimeout is only for example there. You can completly remove it. ;) See here: jsfiddle.net/cxcrk8vr @Zertix.net

Zertix.net Over a year ago

OK , so you are saying with defer.resolve(); outside the setTimeout statement, it would still wait for all stuff ( functions,etc) to complete as long as defer.resolve(); is the last line ?. I couldn't test it since I haven't got some dummy function that runs for seconds on its own..

user400654 Over a year ago

@Zertix.net well, no, because you would still want to execute .resolve() only after whatever action you are performing completes, which will require some kind of callback (just like setTimeout does). promises don't avoid the need for callbacks.

|

Collectives™ on Stack Overflow

Jquery - Chain functions with deferred and promises but without setTimeout

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related