JavascriptでLoopから呼び出されたプロセスが完了するまで、アプリケーションがロックされています

Question

私のアプリでWeb APIコントローラを使用してC＃プロセスにAjaxを呼び出す予定です。これはJQueryループで実行されています。 C＃の処理には多くの時間がかかります。 JQueryループが実行されている間、アプリケーションはロックされており、それ以外は何もできません。ここでは、コードです：

this.PDFReports = function() { 

     var reports = JSON.parse(localStorage.getItem("reportsInfo")) 

     var reportPDFPaths = [] 

     $.each(reports, function (index, r) { 

      //No need to render report as PDF if it is already. 
      if (r.TypeName != "PDF") { 

       var reportid = r.BOReportID 
       var parms = r.parms 
       var parmslength = Object.keys(parms).length 
       var parmstring = "" 

       for (i = 0; i < parmslength; i++) { 
        var parmname = parms[i].name 
        var parmvalue = parms[i].value 

        if (parmstring.length > 0) { 
         parmstring = parmstring + "|Name:" + parmname + "," + "Value:" + parmvalue 
        } 
        else { 
         parmstring = parmstring + "Name:" + parmname + "," + "Value:" + parmvalue 
        } 

       } 

       //Render crystal report as PDF file. 
       var PDFCreateUrl = "/odata/PDFReport" 
       PDFCreateAjaxRequest("post", PDFCreateUrl, { ReportID: reportid, ParmString: parmstring }) 
           .done(function (result) { 
            reportPDFPaths.push(result.value) 

           }) 
           .fail(function (jqXHR, textStatus, errorThrown) { 
           }); 

       function PDFCreateAjaxRequest(type, url, data) { 
        var options = { 
         dataType: "json", 
         contentType: "application/json", 
         type: type, 
         data: data ? JSON.stringify(data) : null, 
         async: false 
        }; 
        return $.ajax(url, options); 
       } 

      } 
      else 
      { 
       var ReportID = r.ReportID 
       var fullpath = localStorage.getItem("PDFServerPath" + ReportID) 
       reportPDFPaths.push(fullpath) 
      } 

     }) 


     localStorage.setItem("reportPDFPaths", reportPDFPaths) 
    } 

Answer 1

  function PDFCreateAjaxRequest(type, url, data) { 
       var options = { 
        dataType: "json", 
        contentType: "application/json", 
        type: type, 
        data: data ? JSON.stringify(data) : null, 
        async: false // There's your problem 
       }; 
       return $.ajax(url, options); 
      } 

同期XHRsが実行をブロックします。 async:falseを回避できるように、この完全なPDFReports関数を非同期で書くことを検討してください。