javascript - x 秒后开始第二个 setInterval

Question

我需要构建一个在 x 秒后上下滚动的页面。我只需要知道如何在延迟后开始第二个 setInterval 。或者，如果人们有其他解决方案，我愿意接受任何事情！

这是代码：

setInterval(function() {
    scrollDown();
},8000);

setInterval(function() {
    scrollUp();
},8000);

function scrollDown() {

    $('html, body').animate({
        scrollTop: $("#page2").offset().top
    }, 2000);
}

function scrollUp() {

    $('html, body').animate({
    scrollTop: $("#page1").offset().top
    }, 2000);
}

Answer 1

只需一个计时器即可更清洁、更精确地执行此操作，如下所示：

setInterval(scrollDown, 8000);

function scrollDown() {
    $('html, body').animate({
        scrollTop: $("#page2").offset().top
    }, 2000);

    setTimeout(scrollUp, 4000);
}

function scrollUp() {
    $('html, body').animate({
        scrollTop: $("#page1").offset().top
    }, 2000);
}

Answer 2

你可以使用一个setTimeout设置本身？

function setNext(up){
  setTimeout(function(){
     if(up) scrollUp(); 
     else scrollDown();
     setNext(!up);
  }, 8000);
}

scrollDown() //first time
setNext(true);

免责声明：我没有测试过。（然而）

这是工作演示。

Answer 3

其他人已经回答了，所以我只会补充一点：

setInterval(function() {
    scrollDown();
}, 8000);

setInterval(function() {
    scrollUp();
}, 8000);

与此相同：

setInterval(scrollDown, 8000);

setInterval(scrollUp, 8000);

如果您在该匿名函数中所做的只是调用另一个命名函数，则不需要匿名函数进行回调 - 您只需传递命名函数即可。

Answer 4

最简单的解决方案，试试这个：

setInterval(function() {
    scrollDown();
},8000);

setTimeOut(function(){
    setInterval(function() {
        scrollUp();
    },8000);
},1000);

因为 setTimeOut 函数只调用一次

Answer 5

setInterval(function() {
    scrollDown();
},8000);

setInterval(function() {
    scrollUp();
},8000 + 2000);

对于它的价值，以上将产生完全相同的效果。但是对于像您的要求这样措辞的代码，您可以：

setInterval(function() {
    scrollDown();
},8000);

setInterval(function() {
    setInterval(function() {
        scrollUp();
    },8000);
2000);