Jquery関数が前の関数を待機するようにする

Question

5秒ごとに読み込むフィードを設定しようとしています。私はサイトに座っている間に最初にロードして作業する部分を持っています。私の次の問題は、突然ポップアップすることなので、よりスムーズに見えるようにしようとしています。

function FinalizeFeed(result) { 
    $(".useractivity").html(result); 
} 
function LoadFeedData() { 
    var dataString = "action=loaduserfeed"; 
    $.ajax({ 
     type: "POST", 
     url: "/core/functions.d/feed.php", 
     data: dataString, 
     cache: false, 
     success: function(result){ 
      $(".post-loading").html('<center><i class="fa fa-circle-o-notch fa-spin fa-5x fa-fw"></i><span class="sr-only">Loading...</span></center>').fadeOut("slow"); 
      setTimeout(FinalizeFeed(result), 2000); 
     } 

    }); 
} 

私の考えでは、FinalizeFeed関数を作成しました。うまく動作しますが、まだポップアップします。 .post-loading.htmlの下にFinalize関数を追加しないと、スピナーが表示されて本当にうまく見えますが、新しいデータの読み込みには本当に役立ちません。setTimeoutを使用して待機していましたが、スピナーは表示されませんアップ。誰もがこのコードで問題が何かを見ていますか？

Answer 1

resultの応答を遅らさないでください。 2秒でさえ。あなたは実際にが遅いデータを示すように、スピナーとローダーを表示しないようにします。 /core/functions.d/feed.phpが発射して100msで応答を送信する場合、なぜそれを表示するためにさらに1900ms待つのですか？

スピナー/ローダーをbeforeSendに追加すると、スピナーは最初の$.ajax()コールで起動し、操作が完了すると削除されます。

したがって、setTimeout()を削除すると、データが返され、使用可能になると表示されます。操作がcompleteになると、スピナーが取り除かれます。

脇に：派手なスピナーを表示するだけの反応を遅らせる人がよくいます。ユーザーはスピナーではなく、データを必要とします。

function LoadFeedData() { 
    var dataString = "action=loaduserfeed"; 
    $.ajax({ 
     beforeSend: function() { 
      $(".post-loading").html('<center><i class="fa fa-circle-o-notch fa-spin fa-5x fa-fw"></i><span class="sr-only">Loading...</span></center>').fadeOut("slow"); 
     }, 
     type: "POST", 
     url: "/core/functions.d/feed.php", 
     data: dataString, 
     cache: false, 
     success: function(result) { 
      $(".useractivity").html(result); 
     }, 
     complete: function() { 
      $(".post-loading").html(''); 
     } 
    }); 
} 

FinalizeFeed()を削除すると、コードが合理化されます。その関数はが$.ajax() success関数にと結ばれているため、実際には再利用できないため、作成する価値はありません。

Answer 2

setTimeout(FinalizeFeed(result), 2000); 

これはsetTimeoutにその関数呼び出しの結果を渡し、その後FinalizeFeed(result)を呼び出します。あなたはこの希望

：

setTimeout(function() { 
    FinalizeFeed(result) 
}, 2000); 

Answer 3

をどのようにこのような何かについて：

function FinalizeFeed(result) { 
    $(".useractivity").html(result); 
} 

function LoadFeedData() { 
    var dataString = "action=loaduserfeed"; 
    $.ajax({ 
    type: "POST", 
    url: "/core/functions.d/feed.php", 
    data: dataString, 
    cache: false, 
    beforeSend: function() { 
     $(".post-loading").html('<center><i class="fa fa-circle-o-notch fa-spin fa-5x fa-fw"></i><span class="sr-only">Loading...</span></center>'); 
    }, 
    success: function(result) { 
     $(".post-loading").fadeOut("slow"); 
     setTimeout(function(){ 
     FinalizeFeed(result) 
     }, 2000); 
    } 

    }); 
} 

ですから、スピナーを示して送信する前に、その後の成功にあなたはスピナーを隠し、setTimeoutメソッドで関数を呼び出します。

それ以外の場合は、スピナーが成功してフェードアウトしていることを示すため、リクエストが長くかかると表示されません。

Answer 4

finalizeFeed（）内でfadeOutを移動し、後で実行されるように無名関数でタイムアウトコードをラップします。

function FinalizeFeed(result) { 
$(".post-loading").fadeOut("slow"); 
    $(".useractivity").html(result); 
    } 
    function LoadFeedData() { 
    var dataString = "action=loaduserfeed"; 
    $.ajax({ 
      type: "POST", 
      url: "/core/functions.d/feed.php", 
      data: dataString, 
      cache: false, 
      success: function(result){ 
       $(".post-loading").html('<center><i class="fa fa-spin fa-5x fa-fw"></i><span class="sr-only">Loading...</span></center>'); 
       setTimeout(function(){FinalizeFeed(result)}, 2000); 
      } 

      }); 
    } 

Answer 5

5秒ごとにデータを更新します。

//function FinalizeFeed(result) { //no need 
// $(".useractivity").html(result); 
//} 
function LoadFeedData() { 
    $(".useractivity").fadeOut("slow"); 
    $(".post-loading") 
     .html('<center><i class="fa fa-circle-o-notch fa-spin fa-5x fa-fw"></i><span class="sr-only">Loading...</span></center>') 
     .fadeIn("slow"); 
    var dataString = "action=loaduserfeed"; 
    $.ajax({ 
     type: "POST", 
     url: "/core/functions.d/feed.php", 
     data: dataString, 
     //cache: false, //this is redundant. post request never cache 
     success: function(result){ 
      $(".useractivity").html(result).fadeIn("slow"); 
      $(".post-loading").fadeOut("slow"); 
      //setTimeout(FinalizeFeed(result), 2000);//no need; bad syntax 
      //"FinalizeFeed(result)" or function(){FinalizeFeed(result);} expected 
      //New cycle starts after 5 sec after data received. 
      //Response time is unpredictable. 
      setTimeout(LoadFeedData, 5000); 
     } 

    }); 
}