javascript - 带 Promise 的 jQuery 动画回调仍然触发得太早

Question

如果单击菜单中的 Logo ，我会向后滚动主页。我在 $(window).scroll() 上也有一个听众它以负边距将对象动画移出屏幕。

我的问题是该事件由动画触发(animate scrollTop)。

这不应该发生，因为我有一个 bool 变量，它必须为 true 才能执行此操作，我仅在滚动动画之后使用 .promise() 的组合将其设置为 true和.done() .

这是我的 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;
}

解决方案是为该函数指定 setTimeout 50 毫秒，但我宁愿在动画完成后正确执行。

使用标准回调会给出相同的输出:

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

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

Answer 1

对于那些想要“hacky”解决方案的人:

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;
}