2009-10-23 2 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, выполняющий скрытие, а затем показ не выполняется. Шоу и скрыть бегут, но прямо друг за другом между ними нет паузы.

Кто-нибудь понял, что происходит здесь?

Syn

+0

, кроме вашего вопроса, этот большой блок if/else выглядит так, как будто это может быть сделано более приятным – jochil

+0

Я использую php для генерации этого блока кода, в зависимости от количества строк и т. Д. – SynackSA

ответ

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

Это только начало второго таймаута при первом запуске. Это оно?

Edit: гораздо проще, как

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

Увлекся: P

+0

Да, это то, что я хочу. Я предположил, что он приостановил работу до окончания таймаута. Кажется, нет. – SynackSA

+0

Да, в javascript нет сна(). Вы должны использовать таймауты и запускать асинхронно. ура – Victor

2

Виктор прав, если вы отправляетесь два таймаута с той же задержкой они оба огня почти точно то же самое время , Если вы хотите показать следующий 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. Это не так, нет преимуществ, которые можно получить, используя эту комбинацию с помощью простых + строк, на самом деле это медленнее.)

Смежные вопросы