如何使用fullpage.js设置不同的setInterval速度

Question

我有不同的部分如下：

<div id="fullpage">
 <div class="section" id="first" data-sec="1000">First</div>
 <div class="section" id="second" data-sec="3000">Second</div>
 <div class="section" id="third" data-sec="6000">Third</div>
 <div class="section" id="fourth" data-sec="1000">Fourth</div>

我目前的fullpage.js代码如下：

var curDelay = 1000;
$("#fullpage").fullpage({
    loopBottom: true,
    afterLoad: function(anchorLink, index) {
        var curDelay = $(this).data('sec');
        console.log(curDelay);
    },
});

setInterval(goSection,curDelay);

function goSection() {
$.fn.fullpage.moveSectionDown();
}

我想根据每个data-sec值设置不同的setInterval速度。目前它只使用默认值。

Answer 1

您必须清除间隔并在afterLoad中再次创建它。

试试这个：

var curDelay = 1000;
var intervalID;
$("#fullpage").fullpage({
    loopBottom: true,
    afterLoad: function(anchorLink, index) {
        var curDelay = $(this).data('sec');
        clearInterval(intervalID); // <-- here
        intervalID = setInterval(goSection, curDelay); // <-- here
    },

    afterRender: function(){
        intervalID = setInterval(goSection, curDelay); // <-- here
    } 
});


function goSection() {
    $.fn.fullpage.moveSectionDown();
}