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

一种用于处理过去使用回调的现代方法是使用 promise ，当与async函数和await结合使用时，这特别有效。（从概念上讲，``承诺''有很多名字-承诺，期货，递延....）

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

您的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必须将此方法与其他异步操作结合起来，以其他方式将其链接起来，等等，那么使用promises可以使代码库之间变得更简单，更标准。

但是如果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函数总是返回一个promise；当您在await函数中使用async时，如果您传递的值是一个承诺（有关“ thenables”的详细说明），它将返回其承诺，然后结算根据您所await对诺言（和/或遵循其的逻辑）发生的事情做出的诺言。

我应该注意，以上scrollToExperience返回的诺言有点不寻常，因为它始终履行诺言，却从不拒绝。使用承诺的代码依赖于这样的事实，即它从不拒绝承诺。

但是，通常来说，务必要处理承诺拒绝或将 promise链传递给将要执行的其他操作，这一点很重要。这是async函数使生活更简单的另一个地方：它们自动传播承诺拒绝，这正是同步函数自动传播异常的方式。

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

1 个答案: