Jquery 异步 function 与 Ajax

Question

我有一个长时间执行的 PHP 脚本，它会生成一些文件。 文件的总量是已知的。 单击按钮时，我想创建一个创建文件数量的进度条。 问题是，当长执行完成时，该栏只前进一次，并且完全填充它，而不是根据某个目录中的文件数量逐步填充。 我不确定 JS 异步调用是否错误，或者异步 PHP 执行是否存在问题。 当一个接一个地执行时，脚本本身可以正常工作。 任何帮助表示赞赏！

html：

<td class="Aktion">
  <div class="Aktion-Text">Generieren</div>
  <div class="Aktion-Ladebalken">
    <div class="Aktion-Ladebalken-filler"></div>
    <div class="Aktion-Ladebalken-Text"></div>
  </div>
  <input type="hidden" class="VSMon" value="1"/>
  <input type="hidden" class="VSJahr" value="21"/>
</td>

PHP 文件计数代码：

chdir("../pdfgenerierung/rechnungen");
$anz = (glob("Rechnung_".date("ym",strtotime($VerrechnungsMonat))."*"));
chdir("../../arbeitsplan");
echo count($anz);

这是我的 JS 代码：请注意，我总共构建了 5 次执行，以免陷入无限循环。

$(document).ready(function(){
    $(".Aktion").on("click",async function(){
        var vsmon = $(this).find(".VSMon").val();
        var vsjahr = $(this).find(".VSJahr").val();
        $(this).removeClass("Aktion"); //Prevent multiple execution
        element = $(this);


        $.ajax({
            //Gets the total amount of files, works properly
            url:"rgAnzahlBerechner.php?type=gesamt&VSMon="+vsmon+"&VSJahr="+vsjahr,
            dataType:"text",
            async:true,
            success:function(daten){
                var PatientenAnzahl = daten;
                $(element).find(".Aktion-Text").remove();
                $(element).find(".Aktion-Ladebalken").css({"height":"20px"});
                $(element).find(".Aktion-Ladebalken").css({"border-width":"2px"});
                $(element).find(".Aktion-Ladebalken-Text").html("0/"+PatientenAnzahl);

                //Call to the long executing script, works properly aswell
                $.ajax({
                    url:"../lfdverrechnung.php?VSMon="+vsmon+"&VSJahr="+vsjahr,
                    async:true,
                    success:function(){
                        console.log("Rechnungen erstellt");
                    }
                });

                temp(vsmon,vsjahr,element,PatientenAnzahl);
            }
        });
    });
});
async function temp(vsmon,vsjahr,element,PatientenAnzahl){
    
    var i=0;
    while(i<5)
    {
        setTimeout(function(){
            //PHP script which should return amount of files created
            $.ajax({
                url:"rgAnzahlBerechner.php?type=teil&VSMon="+vsmon+"&VSJahr="+vsjahr,
                dataType:"text",
                async:true,
                success:function(daten){
                    var new_width = (daten/PatientenAnzahl) * 200;
                    new_width = Math.round(new_width);
                    console.log(new_width);
                    $(element).find(".Aktion-Ladebalken-filler").css({"width":new_width+"px"});
                    $(element).find(".Aktion-Ladebalken-Text").html(daten+"/"+PatientenAnzahl);
                    if(daten == PatientenAnzahl)
                    {
                        $(element).find(".Aktion-Ladebalken-Text").html("Fertig!");
                        return;
                    }
                }
            });
        i++;
        },500);
    }
}

Answer 1

$.ajax() 方法的 xhr 选项用于跟踪上传进度。

所以你可以做这样的事情：

$.ajax({
        //Gets the total amount of files, works properly
        url:"rgAnzahlBerechner.php?type=gesamt&VSMon="+vsmon+"&VSJahr="+vsjahr,
        dataType:"text",
        async:true,
        success:function(daten){
            var PatientenAnzahl = daten;
            $(element).find(".Aktion-Text").remove();
            $(element).find(".Aktion-Ladebalken").css({"height":"20px"});
            $(element).find(".Aktion-Ladebalken").css({"border-width":"2px"});
            $(element).find(".Aktion-Ladebalken-Text").html("0/"+PatientenAnzahl);
    
            //Call to the long executing script, works properly aswell
            $.ajax({
                xhr: function() {
                    var xhr = new window.XMLHttpRequest();
                    xhr.upload.addEventListener("progress", function(evt) {
                        if (evt.lengthComputable) {
                            var percentComplete = ((evt.loaded / evt.total) * 100);
                            //UPLOAD PROGESS
                        }
                    }, false);

                    xhr.addEventListener("progress", function(evt) {
                        if (evt.lengthComputable) {
                            var percentComplete = evt.loaded / evt.total;
                            //DOWNLOAD PROGRESS
                        }
                    }, false);

                    return xhr;
                    
                },
                url:"../lfdverrechnung.php?VSMon="+vsmon+"&VSJahr="+vsjahr,
                async:true,
                success:function(){
                    console.log("Rechnungen erstellt");
                }
            });
            temp(vsmon,vsjahr,element,PatientenAnzahl);
        }
    });

Answer 2

我已经找出了问题并找到了解决方案。 我有一个 DB-Connection 文件，我在整个项目中都在使用它，在这两个文件中也是如此。 似乎在 PHP Session（或连接？）中可以同时使用 DBO Object 的频率是有限制的。

我在我的“rgAnzahlBerechner.php”和我的大脚本“lfdverrechnung.php”中使用了相同的数据库连接，这意味着计算生成文件的脚本首先想要建立一个数据库连接，直到大脚本已完成并释放其数据库连接以供其他脚本工作。 另一个错误是我在脚本顶部包含了 DB 连接（适用于所有功能），而不仅仅是我需要的 function。

我通过将“rgAnzahlBerechner.php”中的两个函数分成两个单独的文件来解决这个问题，一个带有数据库连接，一个没有。 我可以总而言之，“糟糕的代码”或“对事物如何工作的理解不佳”是这里的问题。