他の要素の読み込みからAJAX呼び出しがページを停止します

Question

私はLaravelとJqueryを使用してウェブサイトを構築しています。ページが複数のAJAX呼び出しを発行しています。

これらの呼び出しの1つには数秒かかる場合があり、ページの他の要素が読み込まれないようになっているようです。これには画像やその他のAJAX呼び出しが含まれます。

私のコードは多かれ少なかれこのように見えます。

$.ajax({ 
     async: true, 
     url: url, 
     data: { 
      //data 
     }, 
     success: function (response) { 

     //Process response (append html, images, etc.) 

     for (var key in response) { 
      newAJAXCall(response[key]); 
      } 
     }, 
     error: function (xhr) { 

     } 
    }); 

newAJAXCall呼び出しは次のようになります。

$.ajax({ 
     async: true, 
     url: url, 
     data: { 
      //data 

     }, 
     success: function (response) { 
      //Process response 

     }, 
     error: function (xhr) { 

     } 
    }); 

newAJAXCallは、問題を引き起こしているものです。いくつかのコールは200ミリ秒以内に実行されます。いくつかは数秒かかることがあります。これが起こると、いずれかの要素がまだロードされていない場合、ロードを停止します。

画像の場合、それらのHTMLはすでに存在しています。ブラウザは、AJAX呼び出しが完了するまで、ブラウザのロードを停止します。

私はすでに非同期を設定してタイムアウトを使用してみましたが、何も修正されていないようです。この問題はChromeとSafariの両方で発生するため、ブラウザ固有のようではありません。

EDIT：forループが削除され、新しいAjax呼び出しが1回だけ発行された場合でも、呼び出しが長く続くと問題は解決しません。

EDIT2：Laravel/Phpが単一のクライアントが開くことができる接続の量を制限する可能性はありますか？

EDIT3：問題を引き起こすのは私のサーバーのようです。自分とは異なるサーバーからイメージを読み込むと、Ajaxリクエスト中に正常に読み込まれます。私のコメントを1として

Answer 1

、問題は私のlocalhostをサーバーが十分な能力を持っていなかったということでしたnewAJAXCall成功関数内でループのため

$.ajax({ 
    async: true, 
    url: url, 
    data: { 
     //data 
    }, 
    success: function (response) { 

    //Process response (append html, images, etc.) 


     newAJAXCall(response); 
    }, 
    error: function (xhr) { 

    } 
}); 


function newAJAXCall(response) { 
$.ajax({ 
    async: true, 
    url: url, 
    data: { 
     //data 

    }, 
    success: function (response) { 

     for (var key in response) { 
      //Process response[key] 
     } 

    }, 
    error: function (xhr) { 

    } 
}); 

}

Answer 2

を置くことを検討してください。私の専用サーバでウェブサイトを実行すると、すべてがうまくロードされます。