jQuery hide() when JS loop finishes

Question

I have this JS loop:

          for (var i = 0; i < jsArr.length; ++i) {
            $.post("checkdata.php", { names: jsArr[i], platforms: "1" })
            .done(function(data) {
                eval(data);
            });
          }

data is some jQuery CSS manipulation. I have a loading image that is under the "loadingImg" div class which is display on page load. checkdata.php checks the names against the API https://www.xboxleaders.com/

What's the best way to accomplish $('#loadingImg').hide(); (to hide the image) after the loop and the jQuery .done processes complete?

I have thought about adding it after the loop, but that does not guarantee checkdata has finished.

Do you really need all those Ajax calls? can't you send all data at once? — omma2289
– omma2289, Commented Jul 20, 2013 at 22:23
Perform your .hide as part of your .done callback. You'll need to track whether you're on the last iteration. Of course, if you can send ll the data at once (thanks @koala_dev) then there are fewer calls, faster response, and no tracking to consider — user1864610
– user1864610, Commented Jul 20, 2013 at 22:27
You can just send for example namesArr : jsArr and send data for all images not only for one. — WooCaSh
– WooCaSh, Commented Jul 20, 2013 at 22:27

sabof · Accepted Answer · 2013-07-20 22:32:57Z

3

$.when can be used to combine deferreds, and will resolve, when all of them are resolved.

var defs = [];
for (var i = 0; i < jsArr.length; ++i) {
  defs.unshift($.post("checkdata.php", { names: jsArr[i], platforms: "1" }));
  defs[0].done(function(data) {
    eval(data);
  });
}

$.when.apply($, defs).done(function() {
  $('#loadingImg').hide();
});

answered Jul 20, 2013 at 22:32

sabof

8,2024 gold badges32 silver badges53 bronze badges

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

2 Comments

adeneo Over a year ago

+1 looks about right, hard to test, but putting the deferreds in an array and calling $.when is the way to go.

sabof Over a year ago

I also haven't tested it, so take it with a grain of salt

Joren Van Severen · Accepted Answer · 2013-07-20 22:27:44Z

1

Use a counter:

      var counter = 0;
      for (var i = 0; i < jsArr.length; ++i) {
        $.post("checkdata.php", { names: jsArr[i], platforms: "1" })
        .done(function(data) {
            counter++;
            eval(data);
            if(counter == jsArr.length){
                $('#loadingImg').hide();
            }
        });
      }

answered Jul 20, 2013 at 22:27

Joren Van Severen

2,3692 gold badges24 silver badges33 bronze badges

1 Comment

Joren Van Severen Over a year ago

or use i as smerny suggested, even better

Community · Accepted Answer · 2017-05-23 10:32:10Z

0

You better use waterfall

This question would be helpful.

edited May 23, 2017 at 10:32

CommunityBot

11 silver badge

answered Jul 20, 2013 at 22:31

Yevgen

1,3204 gold badges15 silver badges32 bronze badges

Comments

Jordan Denison · Accepted Answer · 2013-07-20 22:40:05Z

0

One solution to this is by creating a second array that has the same number of elements as jsArr. On each .done, set the corresponding index of the second array to true. Then in each call of .done, check if all the values of the second array are true, and if so, hide. (Or you could just push a new value into the second array and check if the length of the arrays are the same for the hide to take effect)

doneChecks = [];
for (var i = 0; i < jsArr.length; ++i) {
    $.post("checkdata.php", { names: jsArr[i], platforms: "1" })
        .done(function(data) {
            doneChecks.push(true);
            eval(data);
            if (doneChecks.length == jsArr.length)
                $('#loadingImg').hide(); 
    });
}

edited Jul 20, 2013 at 22:40

answered Jul 20, 2013 at 22:33

Jordan Denison

2,73716 silver badges14 bronze badges

Collectives™ on Stack Overflow

jQuery hide() when JS loop finishes

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related