JS：停止并重新开始滚动

Question

在提出问题之前，这里是jsfiddle的链接，以便了解它： https://jsfiddle.net/yucca/87zc691c/20/

我希望有一系列全屏元素，每个元素下面都有文字。我希望当我们滚动时，如果全屏幕元素（灰色）出现超过视口高度的25％，那么我们将重点放在它上面（我使用航点）。然后我们可以滚动下面的文字。慢慢滚动时一切顺利。但如果我们快点走，那么所有的口吃。如果用户快速滚动，则需要强制等待动画结束，然后允许用户继续正常滚动。你能帮我解决这个问题吗？

var $things = $('.sectionFP');

$things.waypoint(function(direction) {
      if (direction === 'down') {
        $('html, body').animate({
          scrollTop: $(this).offset().top
        }, 500);
      }
    }, {
      offset: '75%'
    });

$things.waypoint(function(direction) {
      if (direction === 'up') {
        var laHauteurDuViewPort = $(window).height();
        var laPositionDeLelement = $(this).offset().top;
        var laHauteurDun100VH = $('#section0').height();
        var laDifference = laPositionDeLelement - laHauteurDuViewPort;
        $('html, body').animate({
          scrollTop: laPositionDeLelement - laHauteurDuViewPort
        }, 500);
      }
    }, {
      offset: '25%'
    });