几个周期后 jQuery 定时器搞乱了

Question

我有一个 jQuery 计时器，它似乎在 2 个周期后变得混乱： treethink.treethink.net/backup

现在，在不同的计时器上，它将收回新闻滚动条并更改显示的 div，然后再次将其弹出。经过几个周期后，您可以在上面的链接中看到，有些周期会停留更长的时间，然后重叠，变得一团糟。我不确定为什么会发生这种情况...

这是我的代码：

/* Retracting Ticker */

    /* Initially hide all news items */

    $('#ticker1').hide();
    $('#ticker2').hide();
    $('#ticker3').hide();

    $("#ticker1").oneTime(1000,function(i) { /* Show 1 once on first pull out */

        $('#ticker1').show();

    });

    $("#ticker1").everyTime(64500,function(i) { /* Hide 3 and show 1 everytime timer gets to certain point */

        $('#ticker1').show();

    });

    $("#ticker1").oneTime(21500,function(i) { /* Hide 1 and show 2 once after first pull out */

        $('#ticker1').hide();
        $('#ticker2').show();

    });

    $("#ticker1").everyTime(86000,function(i) { /* Hide 1 and show 2 everytime timer gets to certain point */

        $('#ticker1').hide();
        $('#ticker2').show();

    });


    $("#ticker2").oneTime(43000,function(i) { /* Hide 2 and show 3 once after second pull out */

        $('#ticker2').hide();
        $('#ticker3').show();

    });

    $("#ticker2").everyTime(107500,function(i) { /* Hide 2 and show 3 everytime timer gets to certain point */

        $('#ticker2').hide();
        $('#ticker3').show();

    });

    $("#ticker3").oneTime(64000,function(i) { /* Hide 2 and show 3 once after second pull out */

        $('#ticker3').hide();

    });

    $("#ticker3").everyTime(129000,function(i) { /* Hide 2 and show 3 everytime timer gets to certain point */

        $('#ticker3').hide();

    });

    $("#ticker").oneTime(2000,function(i) { /* Do the first pull out once */

        $("#ticker").animate({right: "0"}, {duration: 800 });
    });

    $("#ticker").oneTime(20000,function(i) { /* Do the first retract once */

        $("#ticker").animate({right: "-450"}, {duration: 800});

    });

    $("#ticker").everyTime(21500,function(i) { /* Everytime timer gets to certain point */

        $("#ticker").animate({right: "0"}, {duration: 800}); /* Pull out right away */

        $("#ticker").oneTime(20000,function(i) { /* Retract once */

            $("#ticker").animate({right: "-450"}, {duration: 800});

        });

    });

谢谢，

韦德

Answer 1

让我们忽略所有 oneTime，因为它们不会让您陷入困境。

$("#ticker1").everyTime(64500,function(i) {
    $('#ticker1').show();
});

$("#ticker1").everyTime(86000,function(i) { 
    $('#ticker1').hide();
    $('#ticker2').show();
});

$("#ticker2").everyTime(107500,function(i) {
    $('#ticker2').hide();
    $('#ticker3').show();
});

$("#ticker3").everyTime(129000,function(i) { 
    $('#ticker3').hide();
});

$("#ticker").everyTime(21500,function(i) { 
    $("#ticker").animate({right: "0"}, {duration: 800});
    $("#ticker").oneTime(20000,function(i) { 
        $("#ticker").animate({right: "-450"}, {duration: 800});
    });
});

您有 4 个对象：股票代码、容器和 3 条消息。

容器的行为是这样的（大约，并且不计算第一次拉出）：每 21.5 秒，隐藏 1.5 秒，然后滑出。好吧，这不是问题的根源，问题在于 3 个消息计时器。

这是间隔中的消息行为：

ticker    show (s)   hide (s)
1         64.5       86
2         86         107.5
3         107.5      129

编辑 我在第一个股票间隔时间的数字错误，但我仍然认为想法是相同的。最终，时间重叠了。