jQuery promise to simulate synchronous calls of function over array

Question

Let' say I need to make a synchronous upload of files. One after another. I found this stackoverflow topic. And modified the code:

var arr = ["file1", "file2", "file3"];

var d = $.Deferred().resolve();
while (arr.length > 0) {
   d = d.then(uploadFile(arr.shift()));
}

function uploadFile(file){
    var d = $.Deferred();    
    setTimeout(function(){ console.log("Uploading file:"+file); d.resolve(""); },1000);
    return d.promise();
}

But i still get them all called asynchronously, but with timeout 1000.

Here is fiddle: fiddle

SOLUTION: Big thanx to Felix. Here is working fiddle

You have to pass a function to .then, not a promise.

Felix Kling
– Felix Kling

2016-05-31 14:04:58 +00:00
Commented May 31, 2016 at 14:04 — Felix Kling
– Felix Kling, Commented May 31, 2016 at 14:04

Felix Kling · Accepted Answer · 2016-05-31 14:11:39Z

1

You have to pass a function to .then. Currently you are calling uploadFile immediately inside the loop and passing a promise to .then instead of a function.

You can do the following without having to use a loop:

d.then(function next() {
  var promise = uploadFile(arr.shift());
  return arr.length === 0 ? promise : promise.then(next);
});

This uses indirect recursion instead of a loop.

answered May 31, 2016 at 14:11

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

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

4 Comments

vol7ron Over a year ago

I haven't done much (if any) deferring with jQuery. Would the following also work? d.then(function() { uploadFile(arr.shift()) }); if redefining the upload by removing the promise (function uploadFile(file) { console.log("Uploading file:" + file); })?

vol7ron Over a year ago

Or, I suppose the promise is necessary for the synchronicity

Felix Kling Over a year ago

"I suppose the promise is necessary for the synchronicity" Yes. Without that it wouldn't wait for the timeout. Also, if your code was still inside the loop, the loop would never terminate because the arr.shift() happens inside the callback and thus arr.length would never become smaller.

vol7ron Over a year ago

Reading up on: abdulapopoola.com/2014/12/12/… -- cool stuff. I think my new interest in life is to take a break from a language and then revisit them to see what I've forgotten or never learned :) tbh, I've been doing less jQuery and more React/ES6-only lately

Collectives™ on Stack Overflow

jQuery promise to simulate synchronous calls of function over array

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related