$.ajax and .each in JQuery, with MVC, isn't asynchronous

Question

my Ajax calls don't seem to be asynchronous when wrapped inside a .each loop, instead they seem to wait for each to finish before calling the next one ..

MVC C#:

   [HttpPost]
    public JsonResult DoActionGetNextStep(JSONSubmission Submission)
    {
        SomeStruct body = new SomeStruct();
        DateTime start = DateTime.Now;
        try
        {
        System.Threading.Thread.Sleep(5000);
        body.html= "There, done";
        }
        catch (Exception e)
        {
        body.html= "There was an error: "+e.Message;
        }
        TimeSpan s = DateTime.Now - start;
        ast.Html = body.html+ "<p> c# took " +s.Seconds +"s</p>";
        return Json(body);
    }

JQuery:

function DoActions(targets) {
$(targets).each(function () { DoAction($(this)); });
}

function DoAction(target) {
var parent = $(target).parents('div.actionReplaceable');
var JSONSubmission = { Data : "somedata" };
var Submission = JSON.stringify(JSONSubmission, null, 2);

$.ajax({
    type: 'POST',
    url: '/Main/DoActionGetNextStep',
    data: Submission,
    async: true,
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    success: function (Result) {
        var html = Result.html;
        $(parent).html(html);
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
        $(parent).html("JQuery Error: " + textStatus + "\n" + errorThrown);
    }
});
}

This ends up taking 25 seconds for 5 elements, each of them reporting that their call took 5 seconds. I thought ajax calls were asynchronous, so this operation should take 5 seconds total? Both server and browser are running on my localhost. Can anyone spot what I'm missing?

Do your log files confirm that the requests are synchronous? We need to rule out the possibility that the server just responds slowly to multiple, successive requests. — George Cummins
– George Cummins, Commented Jul 21, 2011 at 14:13
Is your server multithreaded? If not, it has no choice but to serve up each request sequentially. — sje397
– sje397, Commented Jul 21, 2011 at 14:15

Codo · Accepted Answer · 2011-07-21 14:15:02Z

2

There are two reasons why Ajax calls aren't processed in parallel:

Most browsers limit this, either because they only use two connections to each site they contact or because they explicitly limit concurrent Ajax calls.
If you access the session state in an ASP.NET application (MVC or not), you'll also run into an exclusive lock that causes parallel connections to wait. For MVC, there's an attribute to indicate that your controller action only requires read-only access to the session state to work around that.

answered Jul 21, 2011 at 14:15

Codo

79.7k18 gold badges176 silver badges218 bronze badges

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

Comments

Tomalak · Accepted Answer · 2011-07-21 14:41:55Z

0

Your requests should be asynchronous. Check with console.log in the appropriate places to see when things happen.

$(targets).each(DoAction);

function DoAction() {
  var $parent = $(this).parents('div.actionReplaceable'),
      JSONSubmission = { Data : "somedata" };

  console.log("sending request for " + this-id);

  $.ajax({
    type        : 'POST',
    url         : '/Main/DoActionGetNextStep',
    data        : JSON.stringify(JSONSubmission, null, 2),
    contentType : 'application/json; charset=utf-8',
    success     : function (Result) {
      console.log("received response for " + this-id);
      $parent.html(Result.html);
    },
    error       : function (XMLHttpRequest, textStatus, errorThrown) {
      console.log("received error for " + this-id);
      $parent.html("JQuery Error: " + textStatus + "\n" + errorThrown);
    }
  });
}

There is no need for a target parameter. jQuery sets this correctly for callback functions.
Once you got rid of the target parameter you just need to pass the function reference to .each().
Unless the return type is JSON (seems to be HTML here), setting dataType: 'json' is wrong.
setting async: true is superfluous unless you configured the global Ajax options to be async: false. Which I hope you did not.

edited Jul 21, 2011 at 14:41

answered Jul 21, 2011 at 14:19

Tomalak

339k68 gold badges547 silver badges635 bronze badges

1 Comment

timj Over a year ago

I was calling the ajax method 5 x 5 times, my (targets).each method was completely unnecessary. Thanks for pointing me to console.log for checking ajax calls, very handy!

Collectives™ on Stack Overflow

$.ajax and .each in JQuery, with MVC, isn't asynchronous

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related