Question

在我的网站上，我有一个javascript函数，它执行AJAX调用以获取帐户的信息，然后打开一个模式，您可以在其中查看和编辑信息。 AJAX调用用于更改您选择的数据库中的详细信息，然后刷新原始函数以重新打开模式以刷新其中的信息。但是，在收集要显示的详细信息的功能再次运行之前，似乎偶尔（1/2完成时间）详细信息在DB中的更新速度不够快。

我想在第二个函数运行时尝试延迟，以便在再次获取之前更好地更新细节，但是我不确定如何执行此操作。我尝试了各种各样的东西，但是如下所示，似乎最受欢迎的东西不起作用。您有什么建议我可以解决它，以便代码在继续之前暂停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

当函数包含在ForEach

中时，

setTimeout()可能会按预期运行

function(){ ... }

见这里：JavaScript.setTimeout

Answer 2

您可以使用$.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);

但是与基于promise的解决方案相比，这个解决方案仍然不太实用，因为承诺在Ajax事务完成时真正实现，而不是一秒钟之后。

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以获取解决方法。

编辑：下次我应该打得更快。

Javascript睡眠x秒

4 个答案: