Javascript для цикла блокировки остальной части кода

Question

У меня возникли небольшие проблемы с некоторым Javascript, который я написал. Целью кода является следующее:

1. Чтение списка SKU из предоставленного файла.TXT
2. Разделить данные в каждой строке
3. Для каждого объекта выполните поиск в предоставленном API-интерфейсе JSON, чтобы получить информацию о SKU
4. Выведите эту информацию в таблицу HTML.

В настоящее время у меня это работает, как я и ожидал, однако, похоже, что он не блокирует любой другой Javascript, который я пытаюсь запустить после for петля.

Вот пример моего кода

<script type="text/javascript">

//Set API Address


var api = "/api/AthenaService.svc/GetProductBySku/";


//Get Array of SKUs from TXT file

$.get('/Views/Locale/promoPages/LandingPages/TradeList/TradeList.txt',function(data){

//Split File into lines
var line = data.split('\n');


for(i=0;i<line.length;i++)
{

$.getJSON(api + line[i] , function(data1) {
    // Request complete, NOW we can use the data we got!
    $('.tListBody').append('<tr><td>' + data1.Title + '</td><td align="center">' + data1.Platform.Button + '</td></tr>'); 
    });


};
});



$(document).ready(function() {
$('#searchLoading').fadeOut('slow');
$('#showForm').fadeIn('slow');

$('input#tradeSearch').blur(function() {
$('input#tradeSearch').quicksearch('table#Searchable tbody tr');
});

});
</script> 

У меня проблема в том, что ничего из готового документа не работает вообще.

Я обновил код выше, чтобы отразить предложенное исправление снизу. Кажется, что код работает нормально, но мой плагин quicksearch jQuery, похоже, не запускается. Мне интересно, связано ли это с тем фактом, что элементы TR, которые он должен искать, являются вновь созданными элементами DOM?

Любая помощь будет принята с благодарностью.

Обновить:

Проблема была решена! Немного прочитав документацию по плагину Quicksearch.js, я понял, что можно добавлять записи в кеш быстрого поиска вручную как часть моего цикла. Это исправило проблему.

Обновленный код ниже;

$(document).ready(function () {

    var api = "/api/AthenaService.svc/GetProductBySku/";

    //Get Array of SKUs from TXT file

    $.get('/Views/Locale/promoPages/LandingPages/TradeList/TradeList.txt', function (data) {

        //Split File into lines
        var line = data.split('\n');

        var qs = $('input#tradeSearch').quicksearch('.TheList tbody tr');

        for (i = 0; i < line.length; i++) {

            $.getJSON(api + line[i], function (data1) {
                // Request complete, NOW we can use the data we got!
                $('.tListBody').append('<tr><td>' + data1.Title + '</td><td align="center">' + data1.Platform.Button + '</td></tr>');
                qs.cache();

            });


        };

    });

});

Спасибо за помощь и предложения всем

Answer 1

Я знаю в чем проблема. вы делаете вызовы ajax внутри цикла for, и вы ожидаете, что цикл ожидает завершения ajax. право??

for(i=0;i<line.length;i++)
{

$.getJSON(api + line[i] , function(data1) {
    // Request complete, NOW we can use the data we got!
    $('.tListBody').append('<tr><td>' + data1.Title + '</td><td align="center">' + data1.Platform.Button + '</td></tr>'); 
    });


};

Ajax-вызов асинхронный. так $.getJSON( вызовет сервер и не будет ждать в цикле for до его завершения. как только он делает вызов ajax, он перебирает цикл for. Это даст вам эффект, как будто for loop not blocking the code next to it.... но на самом деле for loop is completing быстрее, чем просто стирая ajax-запросы и затем выполняется следующий код.

Answer 2

Проверьте наличие ошибок в консоли, так как если что-то идет не так, сценарий будет приостановлен, что не позволит запустить более поздний код.

Кроме того, похоже, что вы делаете много HTTP-запросов (по одному на строку в файле), что, вероятно, будет медленным.

Добавление материала в DOM до его готовности также вызовет проблемы. Я бы переместил весь код внутри $(document).ready(function() { });