替代在 JavaScript 中使用回调函数？

Question

我试图在第一个函数的滚动动画完成后调用第二个函数。我已经看到在类似情况下使用回调函数，但是它们似乎更麻烦且难以阅读。有没有更简单或更干净的方法来达到同样的效果？

$('#nav_experience').click(function scrollToExperience(){
    $('html, body').animate({
        scrollTop: $('#Experience').offset().top
    }, 500);
})

function navbarExperienceActive(){
    scrollToExperience(function(){
        $('#nav_profile').removeClass('active');
        $('#nav_education').removeClass('active');
        $('#nav_contact').removeClass('active');
        $('#nav_experience').addClass('active');
    });
}

另外我很欣赏第二个函数是相当重复的，可能有一种更优雅的方式来编写它，我对 JavaScript 比较陌生。

Answer 1

我们过去使用回调的一种现代方法是使用 promises，当与 async 函数和 await 结合使用时特别有效。 （从概念上讲，“承诺”有很多名称——承诺、期货、延期......）

Promises 本身仍然使用回调，但通过为将来的回调提供传递 Promise 的标准化形式，它们显着改进了过去将回调作为参数传递的代码。

例如，您的scrollToExperience 可能如下所示：

function scrollToExperience(){
    return new Promise(resolve => {
        $('html, body').animate({
            scrollTop: $('#Experience').offset().top
        }, 500, resolve);
    });
}

navbarExperienceActive 可能会这样使用它：

function navbarExperienceActive(){
    scrollToExperience().then(function(){
        $('#nav_profile').removeClass('active');
        $('#nav_education').removeClass('active');
        $('#nav_contact').removeClass('active');
        $('#nav_experience').addClass('active');
    });
}

从表面上看，这并没有太大变化；您仍然必须通过回调。但是，如果navbarExperienceActive 必须将其与其他异步操作相结合，以其他方式将其链接起来等等，那么使用 Promise 会使代码库之间的操作更简单、更标准。

但如果navbarExperienceActive 是async 函数，它可以使用await：

async function navbarExperienceActive(){
    await scrollToExperience();
    $('#nav_profile').removeClass('active');
    $('#nav_education').removeClass('active');
    $('#nav_contact').removeClass('active');
    $('#nav_experience').addClass('active');
}

它仍然使用promise，但代码是按照其简单的逻辑流程编写的，而不是担心它必须等待scrollToExperience完成。

async 函数总是返回一个承诺；当您在 async 函数中使用 await 时，如果您传递给它的值是一个承诺（关于“thenables”的手波详细信息），它会返回它的承诺，然后根据你awaiting（和/或遵循它的逻辑）的承诺会发生什么。

---

我应该注意到上面scrollToExperience返回的promise有点不寻常，因为它总是履行promise，它从不拒绝它。使用它的承诺的代码依赖于它从不拒绝它的承诺这一事实。

不过，一般来说，重要的是要确保处理承诺拒绝或将承诺链传递给其他可以处理的东西。这是async 函数让生活更简单的另一个地方：它们自动传播承诺拒绝，就像同步函数自动传播异常一样。