sync-async

by empering

HTML

<h1>sync vs async</h1>
<div class="message">

</div>

JavaScript

$(function() {
	syncCall();
	asyncCall();
});

function syncCall() {
	writeLog("syncCall Start!!");
  
	$.ajax({
  	async: false,
    method: "POST",
  	url: "/echo/html/",
    data: {delay: 2}
  })
  .done(function() {
  	writeLog("sync Done!!");
  });
  
  writeLog("syncCall End!!");
}

function asyncCall() {
	writeLog("asyncCall Start!!");
  
	$.ajax({
  	async: true,
    method: "POST",
  	url: "/echo/html/",
    data: {delay: 2}
  })
  .done(function() {
  	writeLog("async Done!!");
  });
  
  writeLog("asyncCall End!!");
}

function writeLog(message) {
	$(".message").append('<p>' + message + '</p>');
}