Question

好吧，我好像遇到了问题。我正在尝试创建一个twicker来显示数据行。我在一段时间后使用jquery / javascript来隐藏和显示行。这是代码：

<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
</head>
<body>


<script>
var timer_is_on=0;

function doTimer()
{
    if (!timer_is_on)
    {
        timer_is_on=1;
        t=setTimeout("timedCount()",5000);
    }
}

function hide(hideMe) {
    var elem='';
    elem = elem.concat("#").concat(hideMe);
    $(elem).filter(":visible").hide("slow");    
}

function show(showMe) {
    var elem='';
    elem = elem.concat("#").concat(showMe);
    $(elem).show("slow");   
}

function timedCount() {
    $(document).ready(function() {
        if( $("#twitRow1").is(":visible")){
            var th1 = setTimeout(function () {hide("twitRow1")},1000);
            var ts1 = setTimeout(function () {show("twitRow2")},1000);
        } else  if( $("#twitRow2").is(":visible")){
            var th2 = setTimeout(function () {hide("twitRow2")},1000);
            var ts2 = setTimeout(function () {show("twitRow3")},1000);
        } else  if( $("#twitRow3").is(":visible")){
            var th3 = setTimeout(function () {hide("twitRow3")},1000);
            var ts3 = setTimeout(function () {show("twitRow4")},1000);
        } else  if( $("#twitRow4").is(":visible")){
            var th4 = setTimeout(function () {hide("twitRow4")},1000);
            var ts4 = setTimeout(function () {show("twitRow5")},1000);
        } else  if( $("#twitRow5").is(":visible")){
            var th5 = setTimeout(function () {hide("twitRow5")},1000);
            var ts5 = setTimeout(function () {show("twitRow6")},1000);
        } else  if( $("#twitRow6").is(":visible")){
            var th6 = setTimeout(function () {hide("twitRow6")},1000);
            var ts6 = setTimeout(function () {show("twitRow7")},1000);
        } else  if( $("#twitRow7").is(":visible")){
            var th7 = setTimeout(function () {hide("twitRow7")},1000);
            var ts7 = setTimeout(function () {show("twitRow8")},1000);
        } else  if( $("#twitRow8").is(":visible")){
            var th8 = setTimeout(function () {hide("twitRow8")},1000);
            var ts8 = setTimeout(function () {show("twitRow9")},1000);
        } else  if( $("#twitRow9").is(":visible")){
            var th9 = setTimeout(function () {hide("twitRow9")},1000);
            var ts9 = setTimeout(function () {show("twitRow1")},1000);
        }
    });
    t=setTimeout("timedCount()",5000);
}

</script>

<div id="myDivTable">

    <div id="twitRow1">Row 1</div>
    <div id="twitRow2" style="display: none;">Row 2</div>
    <div id="twitRow3" style="display: none;">Row 3</div>
    <div id="twitRow4" style="display: none;">Row 4</div>
    <div id="twitRow5" style="display: none;">Row 5</div>
    <div id="twitRow6" style="display: none;">Row 6</div>
    <div id="twitRow7" style="display: none;">Row 7</div>
    <div id="twitRow8" style="display: none;">Row 8</div>
    <div id="twitRow9" style="display: none;">Row 9</div>
</div>  
<script>
doTimer();
</script>
</body>
</html>

现在，大多数情况下，它都可以隐藏行并显示正确的行并循环播放。我遇到的问题是正在执行隐藏的setTimeout然后显示实际上没有运行。节目和隐藏正在运行，但是彼此之后，它们之间没有1秒暂停。

任何人都知道这里发生了什么？

Syn的

Answer 1

维克多是对的，如果你以相同的延迟引发两次超时，他们几乎会在同一时间点火。如果你想在隐藏前一个div之后显示下一个div，jQuery会在hide method中给你一个回调来完成这个。

无论哪种方式，这都是你所拥有的非常不必要的脚本数量。我建议改为：

$(document).ready(function() {
    var rows= $('#myDivTable>div');
    var rowi= 0;
    rows[rowi].show();

    setInterval(function() {
        rows[rowi].hide('slow', function() {
            rowi= (rowi+1)%rows.length;
            rows[rowi].show('slow');
        });
    }, 5000);
};

（顺便说一句：通常最好将函数传递给setTimeout，而不是字符串。另外你的原始show / hide函数似乎认为String.concat的行为就像一个Java StringBuffer。它没有，没有优势通过使用它而不仅仅是+字符串获得;实际上它更慢。）

Answer 2

此

            var th1 = setTimeout(function () {hide("twitRow1")},1000);
            var ts1 = setTimeout(function () {show("twitRow2")},1000);

会让它们在一秒钟后运行。你想要这个吗？

            var th1 = setTimeout(function () {
                hide("twitRow1");
                var ts1 = setTimeout(function () {show("twitRow2")},1000);
            },1000);

这只会在第一次运行时启动第二次超时。是吗？

编辑：更简单，如

            var th1 = setTimeout(function () {hide("twitRow1")},1000);
            var ts1 = setTimeout(function () {show("twitRow2")},2000);

我被带走了：P

javascript setTimeOut - 不在嵌套的setTimeout上运行

2 个答案: