2016-12-22 9 views
0

私のウェブサイトでは、AJAX呼び出しでアカウントの情報を取得し、情報を表示したり編集したりできるモーダルを開きます。 AJAX呼び出しは、選択したデータベースの詳細を変更するために使用され、元の関数をリフレッシュしてモーダルを再オープンして情報を更新します。しかし、表示される詳細を収集する機能が再度実行される前に、詳細がDBで十分に速く更新されないことがある(1/2 +回完了)場合があります。Javascript x秒間スリープ

もう一度フェッチされる前に、詳細が更新されるより良い機会を与えるために、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"); 
     } 
    }); 
} 
+1

[JavaScript.setTimeout]の可能な複製(http://stackoverflow.com/questions/10312963/javascript-settimeout) –

答えて

2

あなたはthen性質を持つことになります$.ajax戻り、という約束を使用することができます。次に、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機能では、あなたが上記の変化を利用することができます:あなた以来、とにかくあなたのtimeout呼び出しが間違っていた

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

注意を関数参照を渡しませんでしたが、すぐにModeratorActionsを実行しました。

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

をしかし、この解決策は約束ベースのソリューションに比べてまだ少ない実用的である、として:あなたは、参照を渡すと、まだ実際の通話が30秒後に行われたときに渡された引数を持つようにbindを使用している可能性がこの約束はAjaxトランザクションが完了した時点で実際に成立します。

+0

これはうまくいくようですが、いくつか質問があります。何らかの理由でエラーなどの理由で値が返されない場合はどうなりますか?それは待って立ち往生でしょうか?すべてのPHP関数でtry&catchを使用して、値が返されるようにすることで、この可能性を減らすことができますか? –

+1

これは止まらないでしょう。起こりうる最も悪いのはタイムアウトです。この場合、 'then'関数の第2引数が使用できます。私は今これを私の答えに加えました。 options引数を使ってajax呼び出しのタイムアウト時間を定義できることに注意してください。 [jQueryのドキュメント](http://api.jquery.com/jquery.ajax/)を参照してください。 – trincot

3

setTimeout()期待通りに機能がfunction(){ ... }

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

に包まれたときに動作をする可能性があり、ここを参照してください:JavaScript.setTimeout

+0

それは素晴らしい、ありがとう。私が読んだ記事は、それについてはあまり明確ではなく、自分自身の関数を使うときに 'function(){...}'が必要であることを理解していない 'setTimeout(myFunction、30000);好奇心の理由から、構文がこれに似ている理由がありますか? 'function(){...}'パラメータに何かを置くことはありますか? –

1

関数を移動して、それを保存する関数の成功メソッドにデータをリロードするのはなぜですか?保存要求が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"); 
     } 
    }); 
} 
+0

このシナリオではうまくいくでしょうが、このModeratorEditActions関数は、このような状況ではなく、アカウントの詳細を変更するために多く使われているので、表示されているような関数を積み重ねると動的でなくなり、 –

+0

ああ、@trincotによって投稿された答えはあなたのほうが良いでしょう。何らかの理由でリクエストが3秒以上かかると、同じ問題が発生します。 – Tom

0

のsetTimeout(ModeratorActions(StrUsername、StrPage)、30000)。

それはおそらく、それが不確かに働くなぜ、あなたは、次の構文を使用する必要がありますについて説明しているように、あなたのケースでModeratorActionsは、すぐに呼び出されます、コールバックに引数を渡すための正しい方法ではありません。

setTimeout(ModeratorActions, 30000, StrUsername, StrPage) 

注:コールバック関数に追加の引数を渡す上記の構文は、IE 9以降では機能しません。回避策についてはsetTimeout on Mozillaを参照してください。

編集:次回はもっと早く入力してください。

関連する問題