ассинхронная загрузка

#javascript #jquery #ajax

у меня есть страница последовательной загрузки скриптов  за генерацию нужной страницы
отвечают несколько скриптов 
сейчас есть проблема с прогрузкой страницы -точнее она работает через раз , то загружается
весь контент, то нет! 

..код из этого файла (ниже). 

var pageLoaded = false;  // переменная, означающая, что все скрипты на странице были
загружены (используется в header.js)

$(document).ready(function() {
    $.getScript('js/check-authorization.js', function() {
        $('#header').load('html/header.html', function() {
            $('#footer').load('html/footer.html', function() {
                $.getScript('js/functions/convertJsonToHtmlTreeForBspiAndIkz35.js',
function() {
                    $.getScript('locales/translate.js', function() {
                        $.getScript('js/header.js', function() {
                            $.getScript('js/functions/transofm-into-devices.js',
function() {
                                $.getScript('js/functions/transform-firmware_version.js',
function() {
                                    $.getScript('js/settings-for-device.js', function() {
                                        $.getScript('js/settings-for-device-part2.js',
function() {  // необходим для последовательной загрузки выполнения асинхронных действий
                                            $.getScript('js/functions/switch-between-devices.js',
function() {
                                                if ( window.engineerAnthrax == true ) {
                                                    $.getScript('js/functions/send-firmware-version.js',
function() {
                                                        $.getScript('js/functions/send-firmware-version-stm.js',
function() {
                                                            changeLanguage();

                                                            pageLoaded = true;
                                                        });
                                                    });
                                                } else {
                                                    changeLanguage();

                                                    pageLoaded = true;
                                                }
                                            });
                                        });
                                    });
                                });
                            });
                        });
                    });
                });
            });
        });


В файле settings-for-device-part2.js есть код сет тайм аут 

if (    
    ( deviceDeviceType == 1584 ) ||  // ИКЗ-35
    ( deviceDeviceType == 1588 ) ||  // ИКЗ-31Л
    ( deviceDeviceType == 1589 ) ||  // ИКЗ-33Л
    ( deviceDeviceType == 1591 )     // ИКЗ-32Л
) {
    var timerHideTriggers = setInterval(function() {
        if (  // проверяем существуют ли элементы
            ( $('#th-ptg-in-network').length )
        ) {
            clearInterval(timerHideTriggers);

            // - ОЗЗ в сети
            $('#th-ptg-in-network').css('display', 'none'); 
            $('#EventsTypesSaveRecord-check9').parent().css('display', 'none');
            $('#EventsTypesReportAsFail-check9').parent().css('display', 'none');
        }
    }, 100);

    setTimeout(function() {
        clearInterval(timerHideTriggers);
    }, 1000);
}


Вопрос в том, что задержка используется для корректной подгрузки файлов локализации.
но т.к контент динамический -все продолжает ломаться на других данных.Как пофиксить это ?
    

Ответы

Ответ 1

Я бы промисифицировал эти функции и использовал Promise.all чтобы дождаться, когда
загрузятся все.  

Примерно так:

// Предположим, что fn требует callback последним аргументом
function promisify(fn) {
  return function(...args) {
    return new Promise((resolve) => fn.bind(this)(...args, resolve));
  }
}

$(function() {
  $.getScript = promisify($.getScript);
  $.fn.load = promisify($.fn.load); // Могу ошибаться, но надеюсь, что сработает
  Promise.all([ // Первая порция
    $.getScript('js/1.js'),
    $.getScript('js/2.js'),
    $.getScript('js/3.js'),
    $('#header').load('html/header.html'),
  ]).then(() => Promise.all([ // вторая порция
    $.getScript('js/dep_1.js'),
    $.getScript('js/dep_2.js'),
  ])).then(() => $.getScript('js/another.js')) // Ещё скрипт после второй порции
  .then(() => {
    changeLanguage();
    console.log('Loaded');
  })
})


Plunkr




() => {}: Стрелочные функции
...args: Rest-оператор(остальные аргументы) и Spread синтаксис
Promise
Promise.all
bind