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.log之间休息400分钟，对吗？有没有人抓到这个错误？

Answer 1

  

问题来自你是两个元素html，body上的绑定事件。一些   然后，浏览器会将其触发两次（其他一些则有其中一个   元素可滚动，所以只触发一次）。

您可以使用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');
     });
 });

（参见下文@IonicăBizău的评论）