The jQuery docs strongly urge you not to set async
to false
when performing an $.ajax
request.
However, I'm seeing common solutions to synchronicity problems involve doing just this. And then I've seen people been chastised for going against the docs' recommendation.
With that said, I have attempted to use a promise to avoid using async:false
with no luck.
Here is the code I'm using. I have an onclick event that calls addToOrder
:
function saveTemplate() {
var formData = getFormData();
return $.ajax({
type: "POST",
url: "/p/session/save/" + sessionid + "/template/<?php echo $templateID ?>/",
data: formData,
async: true,
success: function(msg){
var rsp = $.parseJSON(msg);
if (rsp.response === 'Saved') {
sessionid = rsp.sessionid;
$("#save-preview-data-response").html(" " + rsp.response).fadeIn(100).delay(1000).fadeOut(1000);
} else {
$("#save-preview-data-response").css('color','#ff0000').html(" " + rsp.response).fadeIn(100).delay(1000).fadeOut(1000);
}
}
});
}
function addToOrder() {
var saved = saveTemplate();
var issaved;
saved.success(function(e) {
var rsp = $.parseJSON(e);
issaved = (rsp.response == 'Saved') ? true : false;
});
if(issaved) {
$.ajax({
type: "POST",
url: "<?php echo $baseURL; ?>addToOrder/respond/json",
data: "sid=" + sessionid,
async: true,
success: function(msg){
var rsp = $.parseJSON(msg);
if (rsp.response === 'Saved') {
alert(msg);
}
}
});
}
}
issaved
will always evaluate to false, as it is being evaluated before saveTemplate
has had time to run. The only solution I have found is to set async:false
but I am taking the warnings I've seen serious and would rather not. What other solutions are there?
Synchronous XMLHttpRequest (async = false) is not recommended because the JavaScript will stop executing until the server response is ready. If the server is busy or slow, the application will hang or stop.
As of jQuery 1.8, the use of async:false in jQuery. ajax() is deprecated.
The jQuery Ajax async is handling Asynchronous HTTP requests in the element. It is a procedure to send a request to the server without interruption. It is an Asynchronous method to send HTTP requests without waiting response. It is a function to working on a server without associating more than on request.
Tactics to avoid using async:false with jQuery?
Learn to love callbacks. :-) When people do this:
// The synchronous way
function doSomething() {
var foo;
$.ajax({
url: "/the/url",
async: false,
success: function(response) {
foo = response.foo;
}
});
return foo;
}
// ...somewhere else, we use it
function flurgle() {
var bar = /* go get `bar` from somewhere */;
var x = 52;
if (doSomething() === bar) {
x -= 10;
}
niftyFunctionUsing(x);
}
...the event-driven, asynchronous way really isn't that much different:
// The asynchronous way
function doSomething(callback) {
$.ajax({
url: "/the/url",
success: function(response) {
callback(response.foo);
}
});
}
// ...somewhere else, we use it
function flurgle() {
var bar = /* go get `bar` from somewhere */;
var x = 52;
doSomething(function(foo) {
if (foo === bar) {
x -= 10;
}
niftyFunctionUsing(x);
});
}
Since callbacks frequently involve closures (the above ones do, that's how we're accessing x
and bar
), this article from my blog may be helpful: Closures are not complicated
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With