【解決方法】JavaScript for ループの増分が減算されない

こんにちは

しばらくこの問題で立ち往生しているので、誰かが私を助けてくれることを期待していました。 Promise と wait を追加するさまざまな方法を試しましたが、あまりうまくいきません。

ダイナミックなグリッドを作成しようとしています。 5 つの要素がビューに渡された場合、3 つのボタンを持つ 1 つのパネルと 2 つのボタンを持つ 1 つのパネルが構築されます。 2 つの要素が渡された場合は、2 つのボタンを持つ 1 つのパネルになります。

JavaScript は渡されたリストを適切なセクションに分割し、これをコントローラーに返して部分ビューを更新します。

1つの問題を除いてはほぼ機能しているようです。レポートの数と処理されたレポートの数を比較することで、(例では) 3 つすべてが表示されたことを識別して foreach ループを停止できることを期待していましたが、ループは継続しており、ループを 3 回繰り返しています。ここで、promise と async が解決策に登場すると思います。

見つけることができるすべての例を試したので、以下のコードは乱雑になり始めていますが、まだ運がありません。

私が試したこと：

$(document).ready(function () {

       var numberOfReports = @Model.Select(x => x.ReportName).Count();
       var reports = JSON.parse('@Html.Raw(Json.Encode(Model.Select(x => x.ReportName)))');

       var divId = 1;
       var arrayId = 0;

       processedReports = 0;

       for (let i = 0; i < numberOfReports; i++) {


           if (numberOfReports === processedReports) return;

                  setTimeout(function () {

                      if (numberOfReports >= 3) {

                          const reportLinks = [reports[arrayId], reports[arrayId + 1], reports[arrayId + 2]]

                          var postData = { threeCells: reportLinks };

                          $.ajax({
                              type: "POST",
                              url: '@Url.Action("ThreeCells", "Home")',
                              data: postData,
                              dataType: "html",
                              success: function (result) {

                                  let threeDiv = document.createElement('div');

                                  threeDiv.setAttribute('id', divId);
                                  document.querySelector('#inner').appendChild(threeDiv);

                                  $('#' + divId).html(result);

                                  divId++;

                                  arrayId = arrayId + 3;
                                  processedReports = processedReports + 3;


                              }
                          })


                      }
                      else if (numberOfReports = 2) {

                          const reportLinks = [reports[arrayId], reports[arrayId + 1]]

                          var postData = { twoCells: reportLinks };

                          $.ajax({
                              type: "POST",
                              url: '@Url.Action("TwoCells", "Home")',
                              data: postData,
                              dataType: "html",
                              success: function (result) {

                                  let twoDiv = document.createElement('div');

                                  twoDiv.setAttribute('id', divId);
                                  document.querySelector('#inner').appendChild(twoDiv);

                                  $('#' + divId).html(result);

                                  divId++;
                                  arrayId = arrayId + 2;
                                  processedReports = processedReports + 2
                              }
                          })


                      }
                      else if (numberOfReports = 0) {
                          return;
                      }


                   }, 1000 * i);

               }




   })