5

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

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

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

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

2
  • 7
    какая жесть! а в чем сакральный смысл такой компоновки? 13 июн 2019 в 15:08
  • 6
    Так вот ты какой, коллбек-хелл
    – vp_arth
    13 июн 2019 в 15:26

1 ответ 1

4

Я бы промисифицировал эти функции и использовал 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


9
  • К сожалению абсолютно не знаком с промисами. Не могли бы уточнить, для использования не нужно случайно подкл. node.js И не ясна запись function promisify(fn) { return (...args) => new Promise((resolve) => fn(...args, resolve)); } что сюда передовать в ...args .
    – user340566
    14 июн 2019 в 7:01
  • 1
    Добавил демо в Plunkr
    – vp_arth
    14 июн 2019 в 7:45
  • контент на странице не грузится до конца , ошибка в консоли TypeError: resultChangeLanguage is undefined ранее был вызов ф-ции локализации языка. Видимо из -за него не работает. Как грамотно теперь прикрутить вызов?
    – user340566
    14 июн 2019 в 8:38
  • changeLanguage();
    – user340566
    14 июн 2019 в 8:50
  • Вы можете загружать зависимые скрипты последовательно в последовательных вызовах then, обновил ответ
    – vp_arth
    14 июн 2019 в 8:52

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.