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

11 февраля 2021, 11:20

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

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

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

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

Answer 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