异步ajax调用和控制器/ajax交互

Question

我有以下场景。我有一个网站，我想复制文件后，点击一个按钮(#btn)和网站应该显示进度条时，文件正在复制。所以我有一个控制器称为检索与void函数复制，做这项工作。我的方法如下:遍历Model中的名称并创建一个运行函数的ajax调用。同时我更新了进度条。现在当我运行程序时，文件的复制是正确的，但是网站只显示最后一个文件更新的进度条。其他进度条保持不变。

<script type="text/javascript">
$(".property-progress").progressbar({ value: 0 });

$("#btn").click(function () {

    @foreach (var job in Model)
    {
    <text>

    var tmp = "#" + '@job';
    var intervalID = setInterval(updateProgress, 250);
    $.ajax({
        type: "POST",
        url: '@Url.Action("Copy", "Retrieval")',
        data: { job: '@job' },
        async: true,
        success: function () {
            $(tmp.toLowerCase()).progressbar("value", 100);
            clearInterval(intervalID);
        }
    });
    function updateProgress() {
        var value = $(tmp.toLowerCase()).progressbar("option", "value");
        if (value < 100) {
            $(tmp.toLowerCase()).progressbar("value", value + 1);
        }
    }

    </text>
    }
    return false;
});
</script>

把工艺

Answer 1

问题是，您正在同一范围内一遍又一遍地生成相同的变量var tmp和相同的函数名称updateProgress。对JavaScript来说，它们都是相同的变量。查看已创建的页面源代码，并查看正在创建的大量类似代码。

我不喜欢的一个解决方案是用唯一的名称创建每个变量/函数，例如tmp@(job)和updateProgress@(job)。这是很可怕的，因为你实际上是在多个目标项上执行一个操作，不应该重复代码。

一个更好的想法是将项目列表注入到JavaScript数组中，然后编写普通的客户端jQuery来处理该任务列表:

var jobs = [ '@string.Join("','", Model)'];

然后使用纯jQuery处理，使用有作用域的函数来保留作业id。比如:

for (var i = 0; i< jobs.length; jobs++){
    processJob(jobs[i]);
}
function updateProgress(tmp) {
    var value = $(tmp.toLowerCase()).progressbar("option", "value");
    if (value < 100) {
        $(tmp.toLowerCase()).progressbar("value", value + 1);
    }
}
function processJob(job){
    var tmp = "#" + job;
    var intervalID = setInterval(function(){updateProgress(tmp)}, 250);
    $.ajax({
        type: "POST",
        url: '@Url.Action("Copy", "Retrieval")',
        data: { job: job },
        async: true,
        success: function () {
           $(tmp.toLowerCase()).progressbar("value", 100);
           clearInterval(intervalID);
        }
    });
}