异步ajax调用与Controller/ajax交互

Question

我有下面的场景。我有一个网站，我想复制文件后，点击一个按钮(#btn)，网站应该显示进度条时，文件复制。因此，我有一个名为检索的控制器，它具有执行此任务的void函数副本。我的方法如下:迭代模型中的名称并创建运行该函数的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);
        }
    });
}