Javascript Sleep for x seconds

Question

На моем сайте у меня есть функция javascript, которая выполняет вызов AJAX для получения информации об учетной записи, а затем открывает модальную версию, где вы можете видеть и редактировать информацию. Вызов AJAX используется для изменения деталей в выбранной вами базе данных, а затем обновляет исходную функцию для повторного открытия модального файла для обновления информации. Кажется, однако, что иногда (1/2 + раза сделано) детали не обновляются достаточно быстро в БД, прежде чем функции, которые собирают детали для отображения, снова запускаются.

Я хочу попытаться отложить, когда вторая функция запущена, чтобы дать больше шансов на обновление данных до того, как их снова выберут, однако я не уверен, как это сделать. Я пробовал разные вещи, однако тот, который кажется самым популярным, как показано ниже, не работает. Есть ли у вас какие-либо предложения, как я могу это исправить, поэтому код приостанавливается в течение x времени, прежде чем продолжить?

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"); 
     } 
    }); 
} 

Answer 1

Вы можете использовать обещание, что $.ajax возвратов, которые будут иметь then собственности. Затем вы можете передать функцию в свойство then, которое будет вызываться только после завершения вызова Ajax. Таким образом, то вам не нужен тайм-аут больше:

function ModeratorEditAccount(StrUsername, Value, StrDetail, StrPage) 
{ 
    // Return the promise to the caller 
    return $.post('http://thomas-smyth.co.uk/functions/php/fncmoderatoreditaccount.php', 
     /// etc ... 
} 

Тогда в вашей ChangeRank функции вы можете использовать указанные выше изменения:

function ChangeRank(StrUsername, StrPage) 
{ 
    var StrRank = $("#sltRank option:selected").val(); 
    //Updates info in database 
    ModeratorEditAccount(StrUsername, StrRank, 'Rank', StrPage).then(function() { 
     // This only executes when previous ajax has returned 
     //Displays info again 
     ModeratorActions(StrUsername, StrPage); 
    }, function() { 
     // an error occurred, like a timeout. 
     ModeratorActions(StrUsername, StrPage); 
    }); 
} 

Обратите внимание, что ваш timeout вызов был неправ в любом случае, так как вы не передал ссылку на функцию, но сразу же выполнил ModeratorActions. Вы могли бы использовать bind передать ссылку и еще аргументы, переданные ему, когда фактический вызов был сделан через 30 секунд:

setTimeout(ModeratorActions.bind(null, StrUsername, StrPage), 30000); 

Но это решение еще менее практичным по сравнению с посыла на основе решения, так как обещание действительно выполняется, когда транзакция Ajax завершается, а не через секунду.

Answer 2

setTimeout() может вести себя, как ожидается, когда функция обернута в function(){ ... }

setTimeout(function(){ ModeratorActions(StrUsername, StrPage) }, 30000); 

Смотрите здесь: JavaScript.setTimeout

Answer 3

Почему бы не переместить функцию для перезагрузки данных в метод успеха функции, используемой для ее сохранения? Вместо того, чтобы надеяться, что запрос сохранения завершится через 3 секунды?

function ChangeRank(StrUsername, StrPage) 
{ 
    var StrRank = $("#sltRank option:selected").val(); 
    //Updates info in database 
    ModeratorEditAccount(StrUsername, StrRank, 'Rank', StrPage); 
    //Displays info again 
    // Removed 
    //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); 
      } 
      // Added here, though you may want to move it 
      ModeratorActions(StrUsername, 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"); 
     } 
    }); 
} 

Answer 4

SetTimeout (ModeratorActions (StrUsername, StrPage), 30000);

Это не правильный способ передачи аргументов в функции обратного вызова, в вашем случае ModeratorActions будет вызываться немедленно, так что, вероятно, объясняет, почему она работает нестабильно, следует использовать следующий синтаксис:

setTimeout(ModeratorActions, 30000, StrUsername, StrPage) 

Примечание: приведенный выше синтаксис, передающий дополнительные аргументы функции обратного вызова, не работает для IE 9 и ниже, прочитайте setTimeout on Mozilla для обходного пути.

EDIT: В следующий раз я должен набрать более быстро.