I am trying to have a loop that asks the user for a confirmation before doing a synchronous ajax request and it is not working in order. This is my code:
<script>
$(document ).ready(function() {
for(var i = 0; i < 3; i++) {
alert("iteration "+i);
$(".demo").easyOverlay("start");
$.ajax({
async: false,
url: "http://rest-service.guides.spring.io/greeting"
}).then(function(data) {
$('.demo').append(data.id);
$('.demo').append(data.content);
$(".demo").easyOverlay("stop");
});
}
});
</script>
The behaviour I am having with my code is like this:
- Ask for the first confirmation.
- Ask for the second confirmation.
- Ask for the third confirmation.
- Executed the three ajax calls one after the other.
It looks like for some reason all the ajax calls gets delayed until the alerts are all confirmed and I don't know why. I tried to achieve my same goal without using a loop and by repeating the code 3 times and I get the same exact strange behaviour.
Edit:
If i put the following line in 'then()' to check if the html is actually modified I can see in the console that the things actually happens in order and they just don't appears in the browser until I confirm every alert and that's what gives the impression that the order of execution is not correct. So I need to figure out why reflecting the changes done to the html is delayed and is not done immediately.
console.log($('.demo').html());
See Question&Answers more detail:os