这是重用JS函数的正确方式吗？

Question

我写了两个函数，它们工作得很好。如果用户位于页面上的某个部分，一个函数会将HTML video属性autoplay添加到视频DOM元素中。另一个函数将滑入一些具有良好过渡的元素。

但缺点是，它将适用于页面内的一个元素，但我希望它也能在其他元素上工作。

这里有一个函数，可以在滚动条上播放视频：

playOnScroll: function() {

    var player = $('.browser video');
    var hasReached = false;

    function isInView(elem){
        return $(elem).offset().top - $(window).scrollTop() < $(elem).height();
    }

    $(window).scroll(function() {

        var section = $('#user-experience');

        // If section exists
        if (section.length) {

            if (isInView(section) && !hasReached) {
                // console.log('play video');
                hasReached = true;
                player.get(0).play();
            }

        }

    });

}

目前，该函数只在id为#user-experience的部分在视图中时执行工作，但如果我可以将该函数用于更多的部分，那就太好了。

在撰写本文的时候，我正在考虑将目标部分更改为类名，如果一个部分有这个类，它就会执行它的工作。或者有没有更好的方法来做到这一点？

如果我看一下我前面提到的第二个函数，它将在滚动上处理一些很好的传入动画，我不知道如何将该函数重用于多个元素选择器：

moduleShift: function() {

    var root = this;
    var el = $('.entry figure');
    var offset = 0.8;

    root.isVisible(el, offset);

    $(window).scroll(function() {

        // Get the offset of the window from the top of page
        var windowPos = $(this).scrollTop();

        setTimeout(function(){ 
            root.isVisible(el, offset); 
        }, 1000);

    });

}, 

isVisible: function(el, offset) {

    el.each(function() { 
        var elHeight = $(this).outerHeight();
        var offsetTop = $(this).offset().top;
        var offsetBottom = offsetTop + elHeight;

        if (offsetTop <= $(window).scrollTop() + $(window).height()*offset) {
            $(this).addClass('moduleShift');
        };

    });

}

上面相同的解决方案应该也可以应用于这个函数，但也许第一个函数也有相同的问题，有没有更好的方法呢？

如果能给我一些建议，我将不胜感激。提前谢谢你。如果还有任何问题，请告诉我。

Answer 1

您可以使用jQuery Waypoints。这可能是实现这一目标的最简单方法。您的函数isVisible和moduleShift应该是当用户滚动到某个点时触发的事件的处理程序。例如：

var waypoint = new Waypoint({
  element: document.getElementById('placeOfYourVideoPlayer'),
  handler: moduleShift;
})