JavaScript: Кто-нибудь может привести пример, когда нужен обратный вызов в обратном вызове (Pyramid of Doom)?

Question

Код ниже выполняет обратный вызов внутри обратного вызова. Зачем это нужно? Почему не может быть 3 отдельных звонка? Обратите внимание, что loadScript просто собирается создать тег стиля и добавить скрипт, переданный в атрибут sr c, динамически.

loadScript('/my/script.js', function(script) {

    loadScript('/my/script2.js', function(script) {

        loadScript('/my/script3.js', function(script) {

            // ...continue after all scripts are loaded
        });
    })

});

Answer 1

В этом случае вы используете обратные вызовы, чтобы гарантировать, что каждый скрипт завершает загрузку до следующего. Они связаны так, что все три сценария должны быть загружены перед продолжением кода. Это важно по той причине, что скрипты блокируют остальную часть рендеринга / выполнения во время загрузки. Вы также можете использовать асинхронный / обещающий синтаксис, чтобы удерживать загрузку в каждой строке, если хотите сделать это:

const loader = new Loader({
    src: 'cdn.segment.com/analytics.js',
    global: 'Segment',
})

// scriptToLoad will now be a reference to window.Segment
const scriptToLoad = await loader.load()

// https://timber.io/snippets/asynchronously-load-a-script-in-the-browser-with-javascript/

https://www.html5rocks.com/en/tutorials/speed/script-loading/

https://www.sitepoint.com/non-blocking-async-defer/