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

【问题标题】：javascript setTimeOut - not running on nested setTimeoutjavascript setTimeOut - 不在嵌套的 setTimeout 上运行
【发布时间】：2009-10-23 10:48:58
【问题描述】：

好的，我似乎遇到了问题。我正在尝试创建一个 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 实际上并没有运行。 show和hide在运行，但是一个接一个，中间没有1s的停顿。

有人知道这里发生了什么吗？

同步

【问题讨论】：

除了你的问题，这个大的 if/else 块看起来可以做得更好
我使用php生成那段代码，取决于有多少行等

标签： php javascript jquery

【解决方案1】：

Victor 是对的，如果您以相同的延迟触发两次超时，它们将几乎同时触发。如果您想在完成隐藏前一个 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，而不是一个字符串。此外，您原来的显示/隐藏函数似乎认为 String.concat 的行为类似于 Java StringBuffer。它没有，没有优势通过使用这个而不是一起 +ing 字符串来获得；实际上它更慢。）

【讨论】：

【解决方案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 中没有 sleep()。您必须使用超时并异步运行该事物。干杯