Question

我有以下情况。我有一个网站，我想在点击一个按钮（#btn）后复制文件，该网站应该在文件复制时显示进度条。所以我有一个名为Retrieval的Controller，它使用void函数Copy完成这项工作。我的方法如下：我遍历模型中的名称并创建一个运行该函数的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)'];

然后使用scoped函数使用普通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);
        }
    });
}

异步ajax调用和Controller / ajax交互

1 个答案: