jQuery не .load() до тех пор, пока .ajax() в обратном вызове .load() не будет завершен?

Question

Моя проблема в том, что <div> с индикатором выполнения jQuery (dnc_scrubber.html) не загружается, пока все остальные запросы не будут заполнены.

Есть ли вообще вокруг этого? Я хочу изменить содержание #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. То же самое происходит - индикатор выполнения не загружается в #tabs-1 до тех пор, пока dnc_scrubber.php не будет завершен.

Что я могу сделать?

Answer 1

ОК, я смотрел на это немного, и у него просто много вопросов/вопросов. Вводя это в качестве ответа, поскольку он слишком велик для комментариев.

1. Ваш комплектTimeout должен быть обернут функцией; как написано это ошибка синтаксиса:

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

2. У вас нет функции getProgress(), но, мне, по крайней мере, кажется, что вызов progress.php должен быть в этой функции, так как это , это не имеет никакого смысла. Мое предположение заключается в том, что вызов ajax для lines.php возвращает количество строк (файлов), а прогресс - это число, обработанное до сих пор, и это должно обновить индикатор выполнения? Вы также должны иметь процент из 100 вычислений обработанных строк и количество файлов. Таким образом, если у вас есть 40 файлов, например, и вы обработали 10 до сих пор, это будет показывать 25 как прогресс (40, деленный на 10 равен 25). Это позволяет упростить функцию setProgress(), как "проги" автоматически получает до 100 в конце:

   функция setProgress() { вар прог = getProgress(); // это progress.php Аякс называют $ ('#progressbar'). progressbar ('option', 'value', prog); если (prog < 100) { комплектTimeout (функция() {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: - полные процессы, даже если вы получите сообщение об ошибке, но успех не , и вы не допускаете ошибок в вашей полной функции.

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», «файлы», «строки», например.

6. Ваш «setTimeout» В setProgress неправильно закрывается точкой с запятой.