javascript setTimeOut - not running on nested setTimeout_问答_开发者

Okay, I seem to be having a problem. I'm trying to create a twicker to display rows of data. I'm using jquery/javascript to hide and show rows after a certain time. Here's the code:

<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>

Now for the most part this works, it's hiding the rows and showing the correct ones and looping around just fine. The problem I am having, is the setTimeout that is doing the hide and then show is not actually running. The show and hide are running, but straight after one another, there is no 1s pause between them.

Anyone got any idea whats happening here?

Syn

Victor is right, if you set off two timeouts with the same delay they will both fire at almost exactly the same time. If you want to show the next div just after you finish hiding the previous one, jQuery gives you a callback in the hide method to do exactly that.

Either way, that's a really unnecessary amount of scripting you've got there. I suggest instead something like:

$(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);
};

(Incidentally: it is generally better to pass a function to setTimeout, not a string. Also your original show/hide functions seem to think String.concat behaves like a Java StringBuffer. It doesn't, there is no advantage to be gained by using this over just +ing strings together; in fact it's slower.)

this

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

will have them run both after one second. Do you want this?

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

this will only start the second timeout when the first runs. Is that it?

Edit: much simpler like

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

I got carried away :P

javascript setTimeOut - not running on nested setTimeout

精彩评论

关注公众号

热门标签

图文推荐

javascript setTimeOut - not running on nested setTimeout

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：