jQuery Ajax response isn't correct (navigation)

[shortysbest]

I've used jQuery ajax for quite some time but have always had this problem;

When you click around on the pages before the ajax request for the first click is finished sometimes it will not output the correct page (the last clicked page).

 

 

Let's say my navigation bar has these links:

 

Home--Messages--Account

 

sometimes when I click home, account, messages,  account (or any combination) quickly (which fires multiple ajax requests), if account is the last clicked link, sometimes it will load messages page instead, or home, whatever it may be, point is it's not the correct page.

 

Any ideas how to fix this? This a huge problem.

 

$(".profile-navigation a").click(function(){

var page = $(this).attr("id");
if(loaded_page==null||loaded_page!=page)
{
$(".profile-navigation a").removeClass("current");
$(this).addClass("current");

$.ajax({
type: "POST",
url: "ajax/profile/"+page+".php",
data: "id="+id,
cache: false,
success: function(html){

$(".profile-bottomright-wrapper").html(html);
loaded_page = page;

}
});