Javascript 带promise的jQuery动画回调仍然触发得太早

如果单击“我的菜单”中的徽标，我会将主页向后滚动。我在

$（window.scroll（）

上也有一个监听器，它以负边距在屏幕外设置一个对象的动画

我的问题是，此事件是通过动画触发的（animate

scrollTop

）

这不应该发生，因为我有一个布尔变量，它必须为true才能执行此操作，我仅在滚动动画后使用

.promise（）

和

.done（）

组合将其设置为true

这是我的JavaScript：

var firstscroll=true;

$(function(){


    var captionWidth= $(".caption").children().size() * 35;
    $(".caption").width(captionWidth);

    $(window).scroll(function() {
      if(firstscroll){
        $(".hidden-menu").removeClass("hidden-menu", {duration:500});
        $('.header').animate({
            marginTop: $('.header').height() * -1
         }, 500);
         $('html, body').animate({
            scrollTop: 0
         }, 500);
         firstscroll = false;
      }
    });

    $(".menu-logo, .logo-container").click(function(){
        $('.header').animate({
            marginTop: 0
         }, 500);
         $('html, body').animate({
            scrollTop: 0
            }, 500).promise().done(resetFirstScroll());
    });
});

var resetFirstScroll = function() {
  firstscroll=true;
}

一个解决方案是给函数设置一个50毫秒的

setTimeout

，但我宁愿在动画完成后正确执行

使用标准回调函数会得到相同的输出：

    $(".menu-logo, .logo-container").click(function(){
        $('.header').animate({
            marginTop: 0
         }, 500);
         $('html, body').animate({
            scrollTop: 0
            }, 500, function() {
                resetFirstScroll();
            });
    });
});

var resetFirstScroll = function() {
  firstscroll=true;
}

对于那些想要“黑客”解决方案的人：

var firstscroll=true;

$(function(){


    var captionWidth= $(".caption").children().size() * 35;
    $(".caption").width(captionWidth);

    $(window).scroll(function() {
      if(firstscroll){
        $(".hidden-menu").removeClass("hidden-menu", {duration:500});
        $('.header').animate({
            marginTop: $('.header').height() * -1
         }, 500);
         $('html, body').animate({
            scrollTop: 0
         }, 500);
         firstscroll = false;
      }
    });

    $(".menu-logo, .logo-container").click(function(){
        $('.header').animate({
            marginTop: 0
         }, 500);
         $('html, body').animate({
            scrollTop: 0
            }, 500, function() {
            setTimeout( resetFirstScroll, 50 );
            });
    });
});

var resetFirstScroll = function() {
  firstscroll=true;
}

.promise（）.done（resetFirstScroll）