是否在JavaScript double for循环中更新HTML进度条？

我有一个Html输入文件，可以上传图像，并使用ajax将其发送到asp.NETMVC控制器，一切正常

但是我在更新一个简单的进度条时遇到了麻烦

这是简单的Html

<input type="file" multiple="multiple" id="file_upload" />
<br />
<input type="button" id="upload" name="upload" value="Upload" class="btn btn-primary btn-block" />
<br />
<div class="outter">
    <div class="inner" id="progress"></div>
</div>
<br />

在我的javascript中，我将请求拆分为一次上载10个图像，如下所示

<script>
var counter = 0;

$("#upload").click(function () {
    var fileUpload = $("#file_upload").get(0);
    var files = fileUpload.files;
    var devide = devider(files.length);

    for (var x = 0; x < devide; x++) {
        var fileData = new FormData();
        for (var i = 0; i < files.length / devide; i++) {
            if (counter < files.length) {
                fileData.append(files[counter].name, files[counter]);
                counter++;                  
            }
        }

        $.ajax({
            type: "POST",
            url: "/Upload/GetFiles",
            data: fileData,
            cache: false,
            contentType: false,
            processData: false,
            async: false,
            success: function (result) {
                console.log(result);
            },
            error: function (xhr, status, error) { console.log('Error:' + error); },
            timeout: 0
        });
    }
});

function devider(number) {
    var count = 0;
    for (var i = 0; i < number; i+=10) {
        count++;
    }
    return count;
}
</script>

var计数器=0；
$（“#上载”）。单击（函数（）{
var fileUpload=$（“#file_upload”）.get（0）；
var files=fileUpload.files；
var devide=devider（files.length）；
对于（变量x=0；x

我只需要在每次上传文件时更新

的宽度，这可能意味着在第二个for循环中。 但是我不能，因为它在一个循环中，它没有更新HTML

p、 我知道setInterval，但我不知道在这种情况下如何实现它

我会使用一个。但这是你问题的答案

编辑：为您添加了一个虚拟进度条：

您说希望在文件上载成功后更新进度栏。因此，让我们创建一个函数

prepare\u progressbar

来准备步骤数，并创建一个函数

update\u progressbar

来更新它

首先，我们让变量包含两个函数中需要的值：

var width_per_file;
var number_of_files_completed;
var number_of_files_to_upload=0;

现在我们通过检查上传了多少文件并初始化变量来“准备”它

function prepare_progressbar(number_of_files){
  var max_progressbar_width=$(window).width();
  // Reset the completed-counter
  number_of_files_completed=0;
  // How much should it increase per file completed?
  width_per_file=$(window).width()/number_of_files;
  // Set the global number of files
  number_of_files_to_upload=number_of_files;
  // Make progress bar "hidden"
  $("#progress").css({"max-width": "0px"});
}

现在，我们想制作一个更新进度条的函数。每次ajax完成请求时，我们都希望它调用此函数：

function update_progressbar(){
  number_of_files_completed+=1;
  var new_progressbar_width=number_of_files_completed*width_per_file;
  $("#progress").css({"width":new_progressbar_width+"px", "max-width":new_progressbar_width+"px"});
}

现在唯一剩下的就是将这些函数插入代码中的适当位置。这一切都是这样的：

var width_per_file;
var number_of_files_completed;
var number_of_files_to_upload=0;

function prepare_progressbar(number_of_files){
  var max_progressbar_width=$(window).width();
  // Reset the completed-counter
  number_of_files_completed=0;
  // How much should it increase per file completed?
  width_per_file=$(window).width()/number_of_files;
  // Set the global number of files
  number_of_files_to_upload=number_of_files;
  // Make progress bar "hidden"
  $("#progress").css({"max-width": "0px"});
}

function update_progressbar(){
  number_of_files_completed+=1;
  var new_progressbar_width=number_of_files_completed*width_per_file;
  $("#progress").css({"width":new_progressbar_width+"px", "max-width":new_progressbar_width+"px"});
}

var counter = 0;

$("#upload").click(function () {
    var fileUpload = $("#file_upload").get(0);
    var files = fileUpload.files;
    var devide = devider(files.length);
    prepare_progressbar(devide);
    for (var x = 0; x < devide; x++) {
        var fileData = new FormData();
        for (var i = 0; i < files.length / devide; i++) {
            if (counter < files.length) {
                fileData.append(files[counter].name, files[counter]);
                counter++;
            }
        }

        $.ajax({
            type: "POST",
            url: "/Upload/GetFiles",
            data: fileData,
            cache: false,
            contentType: false,
            processData: false,
            async: false,
            // On complete, it will call our update_progressbar
            complete: update_progressbar,
            success: function (result) {
                console.log(result);
            },
            error: function (xhr, status, error) { console.log('Error:' + error); },
            timeout: 0
        });
    }
});

function devider(number) {
    var count = 0;
    for (var i = 0; i < number; i+=10) {
        count++;
    }
    return count;
}

var-width\u/u文件；
已完成的文件的var编号；
从文件到上传的变量数量=0；
函数prepare\u progressbar（文件数）{
var max_progressbar_width=$（窗口）.width（）；
//重置已完成的计数器
完成的文件数=0；
//每个完成的文件应该增加多少？
每个文件的宽度=$（窗口）.width（）/文件的数量；
//设置全局文件数
上传文件数量=上传文件数量；
//使进度条“隐藏”
$（“#进度”）.css（{“最大宽度”：“0px”}）；
}
函数更新_progressbar（）{
完成的文件数+=1；
var new_progressbar_width=已完成的_文件数*每个_文件的宽度；
$（“#进度”）.css（{“宽度”：new_progressbar_width+“px”，“最大宽度”：new_progressbar_width+“px”}）；
}
var计数器=0；
$（“#上载”）。单击（函数（）{
var fileUpload=$（“#file_upload”）.get（0）；
var files=fileUpload.files；
var devide=devider（files.length）；
准备进度条（设备）；
对于（变量x=0；x

这个问题的答案可能是，您不能在JavaScript for循环中更新任何HTML

我不知道为什么没有更多的介绍，但我尝试了所有可能的方法，我在Chrome和Fiddle中尝试过，页面上的HTML在循环执行完成之前不会更新。无论是从循环本身尝试，还是调用外部函数，同样在循环执行完成之前，HTML不会重新绘制。

然后我找到了一点原因

这里有一句话,

JavaScript执行和页面呈现在同一执行中完成 线程，这意味着当代码执行时，浏览器将 不要重新绘制页面。（尽管它正在重新绘制页面 对于for循环的每一次迭代，它都将是如此之快，以至于 我真的没有时间看单个的数字。）

所以我不得不放弃for循环来更新HTML，这就是我的JavaScript现在的样子

<script>

    var counter = 0;
    var index = 0;
    var fileUpload;
    var files;
    var devide;
    var add_width;
    var update_width = 0;
    var fileData;
    var interval;

    document.getElementById("file_upload").onchange = function () {
        fileUpload = $("#file_upload").get(0);
        files = fileUpload.files;
        devide = devider(files.length);
        add_width = 100 / devide;
        $("#progress").css({ "width": "0%", "max-width": "100%" });
    }

    $("#upload").click(function () {
        if (fileUpload) {
            $("#outter").css({ "display": "inline-block" });
            prepareUpload();
        }        
    })

    function prepareUpload() {

        fileData = new FormData();
        for (var i = 0; i < 10; i++) {
            if (counter < files.length) {
                fileData.append(files[counter].name, files[counter]);
                counter++;
            }      
        }
        update_width += add_width;
        document.getElementById("progress").style.width = update_width + "%";
        document.getElementById("text").innerHTML = Math.round(update_width) + " % Completed";
        interval = setInterval(upload, 90);  
    }

    function upload() {
        if (index < devide) {
            $.ajax({
                type: "POST",
                url: "/Upload/GetFiles",
                data: fileData,
                cache: false,
                contentType: false,
                processData: false,
                async: false,
                complete: function () {
                },
                success: function (result) {
                    if (result < files.length) {
                        prepareUpload();
                    } else {
                        clearInterval(interval);
                    }
                },
                error: function (xhr, status, error) { console.log('Error:' + error); },
                timeout: 0
            });
        } else {
            clearInterval(interval);
        }
        index++;       
    }

    function devider(number) {
        var count = 0;
        for (var i = 0; i < number; i += 10) {
            count++;
        }
        return count;
    }

</script>

var计数器=0；
var指数=0；
var文件上传；
var文件；
var devide；
var加_宽；
var更新_宽度=0；
var文件数据；
var区间；
document.getElementById（“文件上传”）.onchange=function（）{
fileUpload=$（“#file_upload”）.get（0）；
files=fileUpload.files；
devide=devider（files.length）；
公元