execution of ajax is out of order

Question

the following is the code that I use. I use Java Servlet and it is working perfectly.

$('#subbutton').on("click", function() {
  alert("1");
  var a = chkUser();
  alert('out ' + a);
  if (false) {
    $("#formid").submit();
  }
});

function chkUser() {
  alert("inside chk");
  var result = false;
  $('#subbutton').focus();
  if ($("#user").val().length < 8) {
    alert("User ID must be atleast 8 digits");
    result = false;
  } else if ($("#user").val().length > 10) {
    alert("User ID must not exeed 10 digits");
    result = false;
  } else {
    alert('inside else');
    var u = $('#user').val();
    $.post("../checkUser", {
      data: u
    }, function(responseText) {
      $("#chkout").text(responseText);
      if (responseText.indexOf('Name') >= 0) {
        alert('hi');
        document.getElementById("chkout").style.color = "yellowgreen";
        result = true;
      } else {
        alert('bye');
        document.getElementById("chkout").style.color = "red";
        result = false;
      }
    });
  }
  return result;
}

The problem is the out I am getting is

1

inside chk

inside else

out false --- this is the problem (goes back to parent function)

hi/bye --- and this (executes function inside ajax)

the last two outs are not in the specified order. actually the ajax should execute and in its success it alerts hi or bye, then it returns the result to the parent function, then it alerts the cached result.

but the end is not as expected

I hope it is understandable. Please help if anybody knows.

thanks in advance