jQuery animate callback с обещанием все еще срабатывает слишком рано

Question

Я прокручиваю свою домашнюю страницу, если логотип в моем меню нажат. У меня также есть слушатель на $(window).scroll(), который анимирует объект с экрана с отрицательным отрывом.

Моя проблема заключается в том, что это событие активируется с помощью анимации (анимация scrollTop).

Это не должно происходить из-за того, что у меня есть логическая переменная, которая должна быть правдой для этого, я устанавливаю это только для истины ПОСЛЕ анимации прокрутки с использованием комбинации .promise() и .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; 
}