使用 jQuery 和 Ajax 同时执行 2 个后台任务答案

【问题标题】：Perform 2 background tasks simultaneous with jQuery and Ajax使用 jQuery 和 Ajax 同时执行 2 个后台任务
【发布时间】：2013-02-28 17:01:31
【问题描述】：

在下面更新了我的问题

我制作了一个脚本，用户可以在其中导入大量数据。提交表单并验证数据后，我添加了 2 个后台任务：1 是导入所有数据的脚本。这个脚本还让数据库知道总共有多少，他做了多少。第二个是一个脚本，它从数据库中读取完成了多少，并将其显示在一个漂亮的进度条中。

代码：

$.ajax({
    type: "GET",
    url: "import-process.php",
    success: function(data) {}
});

var process = 0;
var checkPercentage = function() {
    $.ajax({
        type: "GET",
        url: "get-process-status.php",
        data: "importcode=123456",
        success: function(data) {
            if (!data.indexOf("ERROR") !== -1) {
                process = data;
                $("#process_balk").css('width', process + '%');
            }
        }
    });

    if (process != 100) {
        setTimeout(checkPercentage, 1000);
    } else {
        window.location.href = "import-finished.php";
    }
}

checkPercentage();

两个脚本都可以正常工作。除了第二个脚本（获取进程状态）在第一个脚本（导入数据）完成后没有启动。这使得完整的东西有点没用。

有什么办法解决这个问题吗？

更新： 我发现后台进程只被调用一次。那就是问题所在。我只是不确定如何解决它..

var checkPercentage = function() {
    alert("Is this function getting called every second?");
    $.ajax({
        type: "GET",
        async: true,
        url: "required/get-process-status.php",
        data: "importcode=123456",
        success: function(data) {
            alert(data);
        }
    });
    setTimeout(checkPercentage, 1000);
}

上面的代码警告“这个函数是否每秒钟都被调用一次？”每一秒。应该的。但是，值“数据”只被调用一次。这不是我所期望的......有什么想法吗？

【问题讨论】：

标签： php jquery ajax process background-process

【解决方案1】：

你的意思是这样的？：

$.ajax({
    type: "GET",
    url: "import-process.php",
    success: function(data) {
        checkPercentage();
    }
});

var process = 0;
var checkPercentage = function() {
    $.ajax({
        type: "GET",
        url: "get-process-status.php",
        data: "importcode=123456",
        success: function(data) {
            if (!data.indexOf("ERROR") !== -1) {
                process = data;
                $("#process_balk").css('width', process + '%');
            }
        }
    });

    if (process != 100) {
        setTimeout(checkPercentage, 1000);
    } else {
        window.location.href = "import-finished.php";
    }
}

我刚刚将 checkPercantage 函数调用从脚本末尾移至第一个 ajax 的 success 函数。如果您希望在出现错误的情况下运行它，也可以将其移至 complete 函数。

【讨论】：

【解决方案2】：

将你的回调函数设置为：

success: function(data) {
        if (!data.indexOf("ERROR") !== -1) {
            process = data;
            $("#process_balk").css('width', process + '%');
            if (process != 100) {
               setInterval(checkPercentage, 1000);
            } else {
               window.location.href = "import-finished.php";
            }
        }
    }

首先，if 语句必须在回调函数中才能按照您想要的方式工作。其次，您应该使用setInterval() 而不是setTimeout()，因为它会每隔一段时间重新检查一次。

另外，yabol 说得对，你的代码顶部应该是这样的：

$.ajax({
type: "GET",
url: "import-process.php",
success: function(data) {
    checkPercentage();
}
});

【讨论】：