jquery - Javascript Sleep for x seconds -

on website have javascript function ajax call account's information opens modal can see , edit information. ajax call used change detail in database select , refreshes original function re-open modal refresh information there. seems however, (1/2+ times done) details don't update fast enough in db before functions collects details display run again.

i want try delaying when second function ran give better chance details being updated before being fetched again, unsure on how this. i've tried various things, 1 seems popular, shown below, not work. have suggestions how can fix code pauses x time before continuing?

 function changerank(strusername, strpage)  {      var strrank = $("#sltrank option:selected").val();      //updates info in database      moderatoreditaccount(strusername, strrank, 'rank', strpage);      //displays info again      settimeout(moderatoractions(strusername, strpage), 30000);  }   function moderatoreditaccount(strusername, value, strdetail, strpage)  {      $.post('http://thomas-smyth.co.uk/functions/php/fncmoderatoreditaccount.php',      {          strusername: strusername,          value: value,          strdetail: strdetail      }, function(data)      {          if (data == 0)          {              $("#mdlgeneral > div").modal("hide");              if (strsearchtype == "basic")              {                  userbasicsearch(strpage);              }              else              {                  useradvancesearch(strpage);              }          }          else if (data == 10)          {              window.location.href = "http://thomas-smyth.co.uk/login.php";          }      });  }   function moderatoractions(strusername, strpage)  {      $.post('http://thomas-smyth.co.uk/functions/php/fncgetaccountdetails.php',      {          strusername: strusername      }, function(data)      {          var returnvalue = json.parse(data);          if (data == 5)          {}          else          {              if (returnvalue["strgender"] == "m")              {                  strgender = "male";              }              else              {                  strgender = "female";              }              $("#mdleditprofile").html('<div class="modal" tabindex="-1" role="dialog"><div class="modal-dialog" role="document"><div class="modal-content" style="border-radius: 25px;"><div class="box box-widget widget-user-2"><div class="widget-user-header bg-yellow"><div class="widget-user-image"><img class="img-circle" src="../dist/img/user2-160x160.jpg" alt="user avatar"></div><h3 class="widget-user-username">' + returnvalue['strsurname'] + ', ' + returnvalue['strforename'] + ' (' + returnvalue['strusername'] + ')</h3><h5 class="widget-user-desc">member since: ' + returnvalue['dteregdate'] + '</h5></div>\<div class="box-footer no-padding"><ul class="nav nav-stacked"><li><a><strong>name: </strong>' + returnvalue['strsurname'] + ', ' + returnvalue['strforename'] + '<span class="pull-right badge bg-blue" style="cursor: pointer;" onclick="changenameopen(\'' + returnvalue['strusername'] + '\', \'' + returnvalue['strsurname'] + '\', \'' + returnvalue['strforename'] + '\', \'' + strpage + '\')"><i class="fa fa-fw fa-edit"></i> edit</span></a></li><li><a><strong>username: </strong>' + returnvalue['strusername'] + '<span class="pull-right badge bg-blue" style="cursor: pointer;" onclick="changeusernameopen(\'' + returnvalue['strusername'] + '\')"><i class="fa fa-fw fa-edit"></i> edit</span></a></li><li><a><strong>date of birth: </strong>' + returnvalue['dtedob'] + '<span class="pull-right badge bg-blue" style="cursor: pointer;" onclick="changedobopen(\'' + returnvalue['strusername'] + '\', \'' + returnvalue['dtedob'] + '\')"><i class="fa fa-fw fa-edit"></i> edit</span></a></li><li><a><strong>gender: </strong>' + returnvalue['strgender'] + '<span class="pull-right badge bg-blue" style="cursor: pointer;" onclick="changegenderopen(\'' + returnvalue['strusername'] + '\')"><i class="fa fa-fw fa-edit"></i> edit</span></a></li><li><a><strong>account rank: </strong>' + returnvalue['strrank'] + '<span class="pull-right badge bg-blue" style="cursor: pointer;" onclick="changerankopen(\'' + returnvalue['strusername'] + '\', \'' + returnvalue['strrank'] + '\', \'' + strpage + '\')"><i class="fa fa-fw fa-edit"></i> edit</span></a></li></ul></div></div></div></div></div>');              $("#mdleditprofile > div").modal("show");          }      });  }    

you use promise $.ajax returns, have then property. can pass function then property called when ajax call has finished. don't need timeout anymore:

function moderatoreditaccount(strusername, value, strdetail, strpage) {     // return promise caller      return $.post('http://thomas-smyth.co.uk/functions/php/fncmoderatoreditaccount.php',        /// etc ... } 

then in changerank function can make use of above change:

function changerank(strusername, strpage) {     var strrank = $("#sltrank option:selected").val();     //updates info in database     moderatoreditaccount(strusername, strrank, 'rank', strpage).then(function () {          // executes when previous ajax has returned         //displays info again         moderatoractions(strusername, strpage);     }, function () {         // error occurred, timeout.         moderatoractions(strusername, strpage);     }); } 

note timeout call wrong anyway, since did not pass function reference it, executed moderatoractions immediately. have used bind pass reference , still have arguments passed when actual call made 30 seconds later:

settimeout(moderatoractions.bind(null, strusername, strpage), 30000); 

but solution still less practical compared promise-based solution, promise fulfils when ajax transaction completes, , not second later.