javascript - 如何在 JavaScript 中正确使用 Promise.then()？

Question

我正在尝试使用 Promises 依次运行一些函数，但不知何故，第二个函数要么在第一个函数之前执行，要么根本不执行。情况是这样的:

我有以下功能:

• 从partials文件夹加载可重用的html代码:

    function insertingPartials() {
        return new Promise( function(resolve,reject) {
            $('#navbar-placeholder').load('/Assets/Partials/navbar.html');
            $('#jumbotron-placeholder').load('/Assets/Partials/jumbotron.html');
            $('#footer-placeholder').load('/Assets/Partials/footer.html');

            resolve();
            reject('Error');
        });

• 可以进行语言调整的

function languageSpecifics() {
    return new Promise( function(resolve,reject) {
        //showing correct text per html language
        $('span[lang=' + $('html')[0].lang + ']').show();
        $('div[lang=' + $('html')[0].lang + ']').show();
        //disabling the current language from the language selection menu
        $('a[lang=' + $('html')[0].lang + ']').addClass('disabled');
        //links dynamically point to the correct sub-pages
        $('.blog-link').attr('href', '/' + $('html')[0].lang + '/Blog/');
        $('.prod-link').attr('href', '/' + $('html')[0].lang + '/' + $('.prod-link span[lang=' + $('html')[0].lang + ']').text() + '/');
        $('#en').attr('href', window.location.href.replace($('html')[0].lang, 'en'));
        $('#es').attr('href', window.location.href.replace($('html')[0].lang, 'es'));
        $('#ro').attr('href', window.location.href.replace($('html')[0].lang, 'ro'));

        resolve();
        reject('Error in ' + arguments.callee.name);
    });
}

• 将内容滑入 View 的一个:

function loadContent() {
    return new Promise( function(resolve,reject) {
        //fading content in
        $('nav').animate({top: '0'});
        $('footer').animate({bottom: '0'});
        $('.main-content').animate({right: '0'}).css('overflow', 'auto');
        //fading preloading out
        $('.spinner-border').fadeOut();
        $('#preloading').removeClass('d-flex').addClass('d-none');

        resolve();
        reject('Error in ' + arguments.callee.name);
    });
}

• 还有一个可以调整容器高度的

function setContainerHeight() {
    //setting the height of the container
    $('.container').css('height', $('body').height() - ($('nav').height() + $('footer').height()) + 'px');
}

我想做的是让函数按照我上面放置的顺序执行。下面的代码输出 1,2,3,4，但函数“languageSpecifics”不执行或在“insertingPartials”之前执行，因为部分已加载，然后组件滑入 View ，但看不到文本，也看不到链接指向任何地方。

$(document).ready( function() {

    console.log('1')
    insertingPartials().then( function() {
        console.log('2');
        languageSpecifics().then( function() {
            console.log('3');
            loadContent().then( function() {
                console.log('4');
                setContainerHeight();
            });
        });
    });

});

如果我在浏览器控制台中单独执行这些函数，我会得到所需的输出，并且每个 promise 都会返回履行。如果我使用 .then() 运行它们， promise 将返回待处理状态，并且我在页面上看不到任何文本。 (嵌套的“.then(.then()”)和同一级别的“.then().then()”给出相同的结果)

我想知道我在这里做错了什么。另外，如果有更好/更有效的方法来实现我在这里尝试做的事情，请提出建议。

Answer 1

尚无法发表评论。 Afaik .load() 是一个异步函数，这意味着在加载页面之前调用以下解析。您应该尝试使用 .load() 的回调参数，并仅在所有这些都完成后调用解析。