javascript - 用于滚动帖子的 jQuery 自调用函数迭代

Question

我正在尝试创建一个帖子滚动条，它可以向上或向下移动容器以显示下一篇帖子。移动的类型(通过动画完成)取决于以下因素，例如下一篇文章是否是最后一篇文章，以及文章的大小是否大于查看容器。

我之前为该函数使用了 setInterval，但发现我无法根据提及的变量修改间隔时间。

相反，我选择了函数迭代中的函数，这应该允许更大的灵 active 。但是它不起作用!

我有一个完整注释的 JSFiddle .

以及将代码放在这里:

jQuery(document).ready(function ($) {
    // An array of HTML elements with the class '.scrNote' (scrolling note)
    var postArr = $('.scrNote');
    // nextSec prepares the script on how to prepare
    var nextSec = 0;
    // Not sure if this is necessary, but tells us the starting position
    var currPos = $('.postContainer').offset().top;
    // topSpace tells the script how far to scroll
    var topSpace = currPos + $(postArr[nextSec]).outerHeight(true);

    function scrollPosts() {
        nextSec++;
        if (nextSec >= postArr.length) {
            // A reset takes place, bring the posts back to the top
            $('.widgPost').scroll();
            $('.widgPost').animate({
                scrollTop: 0
            }, 2000);
            nextSec = 0;
            topSpace = currPos + $(postArr[nextSec]).outerHeight(true);
            // A 4s delay takes place, before the function repeats (calling itself)
            setTimeout(scrollPosts, 4000);
        } else if (postArr[(nextSec - 1)].height() > $('widgPost').height) {
            // A slow scroll takes place when the post is larger than the widget
            $('.widgPost').scroll();
            $('.widgPost').animate({
                scrollTop: topSpace
            }, 10000);
            topSpace = currPos + $(postArr[nextSec]).outerHeight(true);
            // The function begins again as normal, without a delay
            scrollPosts();
        } else {
            // A regular scroll takes place 
            $('.widgPost').scroll();
            $('.widgPost').animate({
                scrollTop: topSpace
            }, 3000);
            topSpace = currPos + $(postArr[nextSec]).outerHeight(true);
            // A 4s delay takes place, before the function repeats (calling itself)
            setTimeout(scrollPosts, 4000);
        }
    }

    // The function should be called here
    scrollPosts();

});

.widgPost h1, h2, h3 {
    margin: 0;
}
.widgPost {
    width: 100%;
    height: 150px;
    position: relative;
    overflow-y: hidden;
}
.postContainer {
    height: 100%;
    width: 100%;
}
.scrNote {
    width: 100%;
    min-height: 100px;
    background: yellow;
    position: relative;
    display:block;
    margin: 0 0 16px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="widgPost">
    <div class="postContainer">
        <div class="scrNote">
             <h1>Hello!</h1>
Hello here is some text</div>
        <div class="scrNote">
             <h1>Next post!</h1>
Hello here is some more text...</div>
        <div class="scrNote">
             <h1>Next new post!</h1>
Hello here is some more text...</div>
    </div>
</div>

感谢您的帮助!

Answer 1

控制台显示了一些错误...主要是，您在其中一个高度函数之后缺少 ()。

  jQuery(document).ready(function ($) {


    function scrollPosts() {
        //Some intial setup
        var postArr = $('.scrNote');
        var nextSec = 0;
        var isPaused = false;
        var currPos = $('.postContainer').position().top;
        var topSpace = currPos + $(postArr[nextSec]).outerHeight(true);



        nextSec++;
        if (nextSec >= postArr.length) {
            $('.widgPost').scroll();
            $('.widgPost').animate({
                scrollTop: 0
            }, 2000);
            nextSec = 0;
            topSpace = currPos + $(postArr[nextSec]).outerHeight(true);
            setTimeout(scrollPosts, 4000);
        } else if (postArr[(nextSec - 1)].height > $('widgPost').height) {
            $('.widgPost').scroll();
            $('.widgPost').animate({
                scrollTop: topSpace
            }, 10000);
            topSpace = currPos + $(postArr[nextSec]).outerHeight(true);
        } else {
            console.log(nextSec); 
            $('.widgPost').scroll();
            $('.widgPost').animate({
                scrollTop: topSpace
            }, 3000);
            topSpace = currPos + $(postArr[nextSec]).outerHeight(true);
            setTimeout(scrollPosts, 4000);
        }
    };

    scrollPosts();

});

这是一个滚动的 fiddle : https://jsfiddle.net/jackweath/b7vtrwpc/1/

我不确定这是否正是您想要的行为，但至少该功能正在运行。你应该可以从那里拿走它。