2009-10-23 67 views
0

好吧,我似乎有問題。我試圖創建一個twicker來顯示數據行。我使用jQuery/JavaScript在一定時間後隱藏和顯示行。下面的代碼:javascript setTimeOut - 沒有在嵌套setTimeout上運行

<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正在執行hide,然後show實際上並沒有運行。表演和隱藏正在運行,但是一個接一個,他們之間沒有1秒的停頓。

任何人都知道這裏發生了什麼?

的Syn

+0

除了你的問題,這個大的if/else塊看起來好像可以做得更好 – jochil 2009-10-23 10:52:03

+0

我使用PHP來生成代碼塊,取決於有多少行,等等。 – SynackSA 2009-10-23 10:58:46

回答

1

  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

+0

是的,這就是我想要的。我認爲它在超時結束之前保持運行。似乎沒有。 – SynackSA 2009-10-23 11:02:28

+0

是的,JavaScript中沒有sleep()。你必須使用超時和異步運行的東西。乾杯 – Victor 2009-10-23 11:05:13

2

維克多是正確的,如果你設置對開超時具有相同的延遲他們都將大火幾乎一模一樣時間。如果您想在隱藏前一個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。它不,沒有任何優勢可以通過僅僅通過+串來獲得;實際上它比較慢)。