How can I sequence asynchronous operations using jQuery?

Question

I am using jQuery v2.1.4, I have the following function which for each object in evt.data.files(the number of element in the array will vary) needs to make a request to a server.

The problem I am facing with this script is that for each element in evt.data.files an asynchronous request is made, instead I need:

execute each request in sequence (if possible with jQuery)
call a single method when all the request are successfully returned.

Could you please suggest me a solution with an example? Thanks.

options.onInit = function (finder) {
    finder.on('files:choose', function (evt) {
        // files is an array of n object
        evt.data.files.forEach(function (file) {
            // req is an jquery deferred object
            var req = finder.request('command:send', {
                name: 'ImageInfo',
                folder: file.get('folder'),
                params: { fileName: file.get('name') }
            }).done(function (response) {
                if (response.error) {
                    return;
                }

            });
        });
    });
}.bind(this);

Switch to a promise-based code model. You can then use .then() for sequence and $.when() for parallel operations (like "all done"). — iCollect.it Ltd
– iCollect.it Ltd, Commented Feb 10, 2016 at 12:34
Thanks for commenting, I made an edit, I understand your point but the number of element in evt.data.files is variable — GibboK
– GibboK, Commented Feb 10, 2016 at 12:34
@GoneCodingGoodbye how to pass to $.when() the promises (dynamically create in the forEach), thanks for commenting. — GibboK
– GibboK, Commented Feb 10, 2016 at 12:38
Maybe you can try something like this: http://stackoverflow.com/a/35056741/5850827 — Fearodin
– Fearodin, Commented Feb 10, 2016 at 12:41

GibboK · Accepted Answer · 2016-02-10 19:55:38Z

2

I realise I misread the question first time. You only need to run the requests sequentially and await the last one:

Use promise = promise.then(newPromise) to chain promises sequentially:

e.g.

options.onInit = function (finder) {
    finder.on('files:choose', function (evt) {
        var promise = $.when(); // start with a resolved promise

        // files is an array of n object
        evt.data.files.forEach(function (file) {
            promise = promise.then(function(){
               return finder.request('command:send', {
                  name: 'ImageInfo',
                  folder: file.get('folder'),
                  params: { fileName: file.get('name') }
               });
            });
        });
        promise.then(function(){
            alert("Last one done");
        });
    });
}.bind(this);

The key feature here is to return the promise inside an anonymous function in each then call. This defers the execution until the previous promise resolves, but still chains the promises.

edited Feb 10, 2016 at 19:55

GibboK

74.2k149 gold badges453 silver badges676 bronze badges

answered Feb 10, 2016 at 14:10

iCollect.it Ltd

93.9k26 gold badges189 silver badges210 bronze badges

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

1 Comment

GibboK Over a year ago

Please guys, add a comment when down-voting. By the way, this answer solved my issue. Thanks for your time on this!

Collectives™ on Stack Overflow

How can I sequence asynchronous operations using jQuery?

1 Answer 1

e.g.

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

e.g.

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related