Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
menu search
person
Welcome To Ask or Share your Answers For Others

Categories

What I am trying to do is append a loading image to a div (so the user knows something is loading) and then I call a jquery ajax function, which is set to "async: false". Here is my code:

$jQuery("#playersListDiv").html(loadingImage);    
$jQuery.ajax({
         type: "POST", /* this goesn't work with GET */
         url: urlValue, /*ex: "NBAgetGamesList.php" */
         data: parameters, /*ex: "param1=hello" */
         cache: false,
         async: false,
                     success: function(data){

                     }
});

The problem is that the browser locks and does not append the loading image until AFTER the ajax call is done which is useless of course. Firefox is the only browser that actually appends the loading image. IE, Chrome, and Safari DO NOT append the loading image.

I know browser locking happens because async is set to false but this is my only option because I have to wait for this request to complete before continuing because I need the data that is returned.

Is there any way around this? If I place an alert after the I append the loading image that works but I don't want an alert popping up every time.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
394 views
Welcome To Ask or Share your Answers For Others

1 Answer

Despite your assertion to the contrary you don't need it to be synchronous. Whatever you need to do with/after the response can be done in the success (and/or error or complete) callback. So change:

$jQuery("#playersListDiv").html(loadingImage);    
$jQuery.ajax({
   ...
   async: false,
   ...
});
// OTHER CODE

to be like this:

$jQuery("#playersListDiv").html(loadingImage);    
$jQuery.ajax({
   ...
   async: true,
   success: function(data) {
      // OTHER CODE
   }
});

Or move "OTHER CODE" to a separate function that you call from the success callback.

If you need something more complicated than that you could encapsulate the above in a function and pass a callback to it:

function doAjaxStuff(callback) {
    $jQuery("#playersListDiv").html(loadingImage);    
    $jQuery.ajax({
       ...
       async: true,
       success: function(data) {
          // optional other processing here, then:
          callback(data);
       }
    });
}

// then from somewhere else in your code:
doAjaxStuff(function(data) {
   // do something with data
});

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
...