javascript - Duplicate records after drag & drop and AJAX save -

i'm struggling conceptual issue on web app i'm working on. app allows users drag & drop dom element (like note, list, image). drag elements menu sort of sheet of paper. once drop one, app makes ajax call server save element (position, color, etc...) server answers id saved dom element id attribute. when move element again, same ajax call made id.

the problem though, if drop new element on drop zone move again, creates duplicate entries because first ajax call hasn't finished yet second 1 made without id (since has come server).

here's simplified sample of javascript code save elements :

function saveobject(object,action){      var params = {         x : object.position().left,         y : object.position().top,         w : object.width(),         h : object.height(),      };      if(object.attr("id")){          params.id = object.attr("id");     }      $.post("/save_object",params,function(data){         if(data.success){             object.attr("id",data.data);         }     });  } 

server-side, check id either run "create" function or "modify" function id.

this specific, i've looked lot of post ajax duplication setting flag won't here. can't block ajax request being made because it's supposed not block ui elements , don't want lose save events. have restriction stick because page dynamic , users on same page see each other user's events.

i thankful answer @ point.

there few different ways can go solving issue, i'll let choose 1 may more suitable application.

option 1 queue requests server storing them inside array. have logic send request 1 one.

option 2 move object id inception onto client side using guid's rather auto-incrementing id's. save these server without worry of duplication or overwriting. suggest using mvc keep logic organised, backbone.js example.