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
加载中,请稍侯......
精彩评论