jQuery动画完成功能

Question

我试图做一个全屏部分滚动页面。我已经能够阻止默认的用户滚动。现在，以取代我用下面的代码：

var isAutoScrolling = false; 
$(window).off('scroll.fullscreen'); 
$(window).on('scroll.fullscreen', function() { 
    if (isAutoScrolling === false) { 
     isAutoScrolling = true; 
     $('html, body').animate({ 
      scrollTop: $(nextDiv).offset().top 
     }, '400', 'linear', function() { 
      console.log('animated'); 
      isAutoScrolling = false; 
     }); 
    } 
}); 

可惜的console.log写“动画”每次滚动的2倍。这怎么可能？上面的代码应该至少在2个console.logs之间做出400ms的中断，对吧？任何人都在捕捉这个错误？

Answer 1

问题来自你对两个元素HTML，身体结合事件。一些 浏览器然后将它发射两次（其他一些具有这些可滚动的 元素中的一个，因此只发射一次）。

您可以使用promise接口和相关方法在浏览器中对其进行规范化。

$(window).on('scroll.fullscreen', function() { 
    if (isAutoScrolling === false) { 
     isAutoScrolling = true; 
     $('html, body').animate({ 
      scrollTop: $(nextDiv).offset().top 
     }, '400', 'linear').promise().done(function() { 
      console.log('animated'); 
      isAutoScrolling = false; 
     }); 
    } 
}); 

这是说，我想，而不是使用一个标志，你可以使用 :animated伪选择：

$(window).on('scroll.fullscreen', function() { 
    $('html, body').filter(':not(:animated)').animate({ 
     scrollTop: $(nextDiv).offset().top 
    }, '400', 'linear').promise().done(function() { 
     console.log('animated'); 
    }); 
}); 

（见@下面尼卡比曹的评论）