php - jQuery 不会在 .load() 回调中的 .ajax() 完成之前执行 .load() 吗？

Question

我的问题是 <div> jQuery 进度条 ( dnc_scrubber.html ) 在所有其他请求完成之前不会加载。

还有这方面的事情吗？我想更改#tabs-1的内容到进度条，并在 dnc_scrubber.php 时为其设置动画正在做它的工作。

lines.php和progress.php文件用于计算 dnc_scrubber.php 完成的工作百分比- 随着 session 的进行而更新 session 。 lines.php和files.php返回 session 变量。

$('#tabs-1').load('dnc_scrubber.html', function() {
    var querystring = 'col=' + col + '&' + makeQS(files);
    var lines = 0;

    $('#progressbar').progressbar();

    $.ajax({
        url: 'dnc_scrubber.php',
        type: 'POST',
        async: true,
        data: querystring,
        complete: function() {
            for (i = 0; i < files.length; i++) {
                $('#complete').append('<a href="process/MATCHED - ' + files[i] + '">MATCHED - ' + files[i] + '</a><br />');
                $('#complete').append('<a href="process/SCRUBBED - ' + files[i] + '">SCRUBBED - ' + files[i] + '</a><br />');
            }
        }
    });

    $.ajax({
        url: 'lines.php',
        async: true,
        dataType: 'json',
        complete: function(json) {
            lines = json.total;
        }
    });


    function setProgress() {
        if (prog < lines) {
            prog = getProgress();
            $('#progressbar').progressbar('option', 'value', prog);
            setTimeout(setProgress(), 1000)
        } else {
            $('#progressbar').progressbar('option', 'value', 100);
        }
    }

    var prog = getProgress();
    setTimeout(setProgress(), 1000);
});

我已经尝试在 .ajax() 的回调函数中加载进度条请求 async设置为false 。同样的结果发生 - 进度条未加载到 #tabs-1直到dnc_scrubber.php已完成。

我能做什么？

Answer 1

好吧，我盯着这个看了一会儿，它似乎有很多问题。将其作为答案，因为它太大，无法发表评论。

1. 您的 setTimeout 应该包装在一个函数中；正如所写，这是一个语法错误:

   setTimeout(function() { setProgress(); }, 1000);

2. 你没有 getProgress() 函数，但是，至少对我来说，progress.php 调用似乎应该在该函数中，事实上，这是没有意义的。我的假设是，对lines.php的ajax调用返回行数(文件)，进度是迄今为止处理的数量，这应该更新进度条？您还应该对已处理的行数与文件数进行 100 的百分比计算。因此，如果您有 40 个文件，并且到目前为止已处理了 10 个文件，则进度将显示为 25(40 除以 10 等于 25)。这允许您将 setProgress() 函数简化为“prog”，然后在最后自动达到 100:

   函数设置进度() { var prog = getProgress();//progress.php是否进行ajax调用 $('#progressbar').progressbar('选项', '值', prog); 如果(程序 < 100){ setTimeout(function() {setProgress();}, 1000); }}

2A 每秒移动一次 ajax 调用来处理:

function getProgress() {
    var lines = 0;
    $.ajax({
        url: 'progress.php',
        async: false,
        data: '{}',
        dataType: 'json',
        success: function(json) {
            lines = json.total;
        }
    });
    return lines;// should be 0 to 100 to show progress percent
};

1. 使用 complete: 而不是 success: - 即使出现错误，也会完成流程，但 success 不会，并且您不会在程序中捕获错误功能齐全。

2. 您对清理器的调用没有数据类型，因此它假定为 json，您是否真的打算将查询字符串附加到 url 字符串并将数据清空为:data: '{}', 代替？这对我来说是一个疯狂的假设，因为您没有列出您的 makeQS() 函数。

3. 您对lines.php 的调用没有数据，这在某些情况下可能会导致问题。在其中放置一个空的 data:'{}',。

4. 您的文件数组处理不是最有效的:

   success: function() {
       var fileLength = files.length;//assumes files does not change, keeps loop from a lookup on every loop.
       for (var i = 0; i < fileLength; i++) {
           var myMatch = 'MATCHED - ' + files[i];//better string handling - do one time only
           var myScrub = 'SCRUBBED - ' + files[i];
           $('#complete').append('<a href="process/' + myMatch + '">' + myMatch + '</a><br />');
           $('#complete').append('<a href="process/' + myScrub + '">' + myScrub + '</a><br />');
       }
   }
   

5. 您有许多全局变量，这通常不是一个很好的做法。例如“col”、“files”、“lines”。

6. setProgress 中的“setTimeout”未以分号正确终止。