jQuery 不会 .load() 直到 .load() 回调中的 .ajax() 完成？

Question

我的问题是带有 jQ​​uery 进度条 (dnc_scrubber.html) 的 <div> 直到所有其他请求都完成后才加载。

这有什么问题吗？我想将#tabs-1 的内容更改为进度条，并在dnc_scrubber.php 工作时对其进行动画处理。

lines.php 和 progress.php 文件用于计算 dnc_scrubber.php 完成的工作的百分比 - 它会在会话进行时更新会话。 lines.php 和 files.php 返回会话变量。

$('#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。同样的结果也会发生 - 直到dnc_scrubber.php 完成，进度条才会加载到#tabs-1。

我能做什么？

Answer 1

好的，我盯着它看了一会儿，它似乎有很多问题/疑问。把这个作为答案，因为它对于 cmets 来说太大了。

1. 你的 setTimeout 应该被包裹在一个函数中；正如所写，这是一个语法错误：

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

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

   函数 setProgress() { var prog = getProgress();//progress.php ajax 调用 $('#progressbar').progressbar('option', 'value', prog); 如果（程序

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: - 即使遇到错误也能完成进程，但成功不会，并且不会在完整函数中捕获错误。

1234563这是我的一个疯狂假设，因为您没有列出您的 makeQS() 函数。

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

3. 您的文件数组处理不是最有效的：

   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 />');
       }
   }
   

4. 您有许多全局变量，这通常不是一个好习惯。例如“col”、“files”、“lines”。

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