How to perform an async operation in loop

Question

I am working on chrome extension (StackEye) and as per my use case, I have to delete some objects from localStorage in a loop. Here is my code,

for (var i = 0; i < objectKeys.length; i++) {
  chrome.storage.local.remove(objectKeys[i], function() {
    // Do something with objectKeys[i] like remove the corresponding element from DOM
    // Show notification to user that objectKeys[i] item has been removed
  });
}

You can see I have used Closure here to identify which particular object was removed and do something with it later. But the issue is

It is possible that when anonymous method (remove success handler) will be called till then value of i might have changed in the loop and it affects the action in the handler.

How do I solve this problem ?

possible duplicate of Javascript closure inside loops - simple practical example — Felix Kling
– Felix Kling, Commented Mar 7, 2014 at 17:34
@Felix thanks for posting the link to a much insightful answer..btw i did google search but related to ajax and loop terms.. Thanks once again.....time to pick up the good parts book and read about closure..:) — Sachin Jain
– Sachin Jain, Commented Mar 8, 2014 at 1:23

Rob Sedgwick · Accepted Answer · 2014-03-07 17:03:30Z

1

We can use a recursive function instead of a for loop

var len = objectKeys.length;

function asyncLoop(count) {
  chrome.storage.local.remove(objectKeys[count], function() {
    if(count < len) { 
      asyncLoop(count++); 
    }
  });
}

asyncLoop(0);

edited Mar 7, 2014 at 17:03

answered Mar 7, 2014 at 16:33

Rob Sedgwick

5,2364 gold badges22 silver badges36 bronze badges

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

3 Comments

Sachin Jain Over a year ago

+1 Good idea indeed!! I thought the same but issue with this approach is we have chained all the async calls and if one of them fails..Rest are not executed.

Sachin Jain Over a year ago

Its fine..I am good with the above approach..I will accept the answer as soon as SO permits me :)

Sachin Jain Over a year ago

I have edited the code to make it more simpler. Can you please verify it. Feel free to revert the revision if I made any mistake. Thanks

problemPotato · Accepted Answer · 2014-03-07 16:32:51Z

0

Try using a variable in the scope of the closure, to be accessed later.

for (var i = 0; i < objectKeys.length; i++) {
  var myobject = objectKeys[i]; //this variable is in the scope of the closure
  chrome.storage.local.remove(myobject, function() {
    // Do something with objectKeys[i] like remove the corresponding element from DOM
    // Show notification to user that objectKeys[i] item has been removed
  });
}

answered Mar 7, 2014 at 16:32

problemPotato

6094 silver badges9 bronze badges

1 Comment

Felix Kling Over a year ago

This doesn't solve the problem. It's the same thing, myobject will have the value of the last iteration when the first callback is executed.

Collectives™ on Stack Overflow

How to perform an async operation in loop

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related