jQuery ajax beforeSend干扰.done（）

Question

In a website I have several ajax-parts that are loaded by events, mostly clicks. To inform the visitor a loading partial is shown. This works nice most of the time, but sometimes the ajax call is receiving the respons so quick it interferes with the beforeSend.

My typical structure looks like this:

$(document).on('click', '.handler', function() { 
  var target = $(this).attr('data-targetElement');

  $.ajax({
    url: '/ajax.php?someParameter=hasValue',
    beforeSend: showLoading(target)
  })
  .done(function(response) { 
    console.log('Hi there, I\'m done!');
    $('#' + target).html(response);
  });
});

// This is in a function because it's used by all ajax-calls
function showLoading(target) { 
  $('#' + target).html('My loading message');
}

The problem is, when I'm inspecting console messages, that the loading message is still shown even though the .done() was reached, because Hi there, I'm done! is shown.

So it looks beforeSend doesn't seem to have reached a completed state or something like that causing it to 'freeze', because the content in the targetElement is not updated with the response for the ajax-call.

I'm not sure how to solve to this. Any suggestions?

Update, Sorry for the typo, I just typed the exemplary code in here...

Answer 1

1. At first, you need to fix all syntax errors in your code. Remove ; in the middle of the statement.

   $.ajax({
     beforeSend: showLoading(target);
     //                             ^ SYNTAX ERROR
   })
   

2. When you write showLoading(target) you call the showLoading() function immediately.

   If you need to set pass it as a callback with parameters, you need to pass a function, that returns your callback.

   beforeSend: function() {
       showLoading(target);
   }