のjQuery：各反復

Question

ための遅延は、これは私が欲しいの論理であると仮定し設定する：反復と要求することなく、試験の遅延のために

// On fail return status = 500, else success will return PDF bytestream 
function request() { 
    return $.ajax({ 
      url: url, 
      async:false, 
      // other properties 
     }); 
} 

$('#action').click(function(e) { 

    $("#loading").fadeIn("slow"); // display loading 

    while(true) { 
     if(request().status != 200) { 
      delay(3000); 
     } else { break; } 
    } 

    $("#loading").fadeOut("slow"); // hide loading 
}); 

、このコードはうまく機能：

問題は、私開始いくつかのループを入れ、内部にリクエストする：

var isOk; 
    $(document).ready(function(){ 
     $('#action').click(function(e) { 

      $("#loading").fadeIn("slow"); 

      while(true) { 
       request().always(function(jqXHR){ 
        console.log(jqXHR); 
        if(jqXHR.status == 500) { 
         isOk = false; 
         setTimeout(function(){console.log("False")}, 3000); 
        } else { isOk = true; } 
       }); 

       if(isOk) {break}; 
      } 

      $("#loading").fadeOut("slow"); 
      e.preventDefault(); 
     }); 
    }); 

iterの間に遅延がないようですation。読み込み中のシンボルは即座にfadeInとfadeOutになります。任意のアイデア反復のための正しい遅延を行うには？

Answer 1

電話をする必要があります。

$(document).ready(function(){ 

    $('#action').click(function(e) { 
     e.preventDefault(); 

     $("#loading").fadeIn("slow"); 

     performRequest(); 

    }); 

    function performRequest() { 

      request() 
       .always(function(jqXHR){ 
        console.log(jqXHR); 

        if(jqXHR.status === 500) { 
         console.log("False"); 
         var t = setTimeout(function() { 
          performRequest(); // retry after 3sec. 
          clearTimeout(t); 
         }, 3000); 
        } else { 
         onRequestSuccess(); // success 
        } 
      }); 
    } 

    function onRequestSuccess() { 
     $("#loading").fadeOut("slow"); 
    } 

}); 

Answer 2

ajax呼び出しがasynchronousであるため、次のコード行を実行する前に待機しません。

終了時にfadeOutを実行する場合は、​​をajaxコールのコールバック関数内、またはthis function内に実行します。

あなたは//other propertiesを持っているところ、以下の権利を置く：

complete: function(jqXHR, textStatus) { 
    $("#loading").fadeOut("slow"); 
} 

---

をあなたがそうdelay()、setTimeout()を使用する必要があります。

遅延：

$("#loading").fadeIn(2000); 
$("#loading").delay(2000).fadeOut(2000); 

のsetTimeout：

$("#loading").fadeIn(2000); 
setTimeout(function(){ 
    $("#loading").fadeOut(2000); 
}, 2000); 

---

ちょうど別の提案、あなたのAjax呼び出しではなく、whileループでエラー処理します。

error: function(jqXHR, textStatus, errorThrown) { 
    setTimeout(function() { 
    request(); 
    }, 3000); 
} 

をと別の、@ブラッドのadvを取る代わりにCSS Animationsを使用してください。

Answer 3

ここに私が話していたことがあります。この例では、fadeInがコールバックとして終了した後にfadeOutが実行されます。私はあなたもそれを行うことができることを示すタイムアウトを含めた。

$(function() { 
 
    $("#test").fadeIn(2000, function() {   
 
     setTimeout(function() { 
 
      $("#test").fadeOut(2000); 
 
     }, 1000); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="test" style="display:none"> 
 
    TEST DIV 
 
</div>

あなたはロードがそれぞれAJAX呼び出しの前にフェードインし、成功した後にフェードアウトしたい場合は、あなたのAjaxの成功コールバックでフェードアウトを処理する必要があります。あなたのコードを使って、これは完了時に消えます。

$(document).ready(function(){ 
    $('#action').click(function(e) { 

     $("#loading").fadeIn("slow"); 

     while(true) { 
      request().always(function(jqXHR){ 
       console.log(jqXHR); 
       if(jqXHR.status == 500) { 
        setTimeout(function(){console.log("False")}, 3000); 
       } else { 
        $("#loading").fadeOut("slow"); 
        break; 
       } 
      }); 
     }    
     e.preventDefault(); 
    }); 
}); 

Answer 4

使用promises（技術的には、この例ではjQuery Deferredが、同じ概念）のフローを固定し、そして自分自身に頭痛を大幅に節約するために：

$('#action').click(function(e) { 
    $('#loading').fadeIn('slow'); // display loading 
    $.ajax(url).always(function (e) { 
    $('#loading').fadeOut('slow'); // hide loading 
    }); 
}); 

このようなフェードアウト（）AJAX要求が解決され、

私は.always()を使用しています...そのようにエラーがあっても、ローディングインジケータは表示されません。 .fail()の別のハンドラを追加してエラーをキャッチできます。

.show()と.hide()を使用して、このようなフェーディングスタイリングにCSSアニメーションを使用してください。この場合は大したことではありませんが、アプリケーションロジックをスタイリングからさらに分離しながら、JavaScriptからブラウザエンジンでこれらの遷移をきわめて最適化します。