javascript setTimeOut - не работает на вложенном setTimeout - PullRequest
Новая
       8

javascript setTimeOut - не работает на вложенном setTimeout

0 голосов
/ 23 октября 2009

Хорошо, похоже, у меня проблема. Я пытаюсь создать твикер для отображения строк данных. Я использую 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 выполняет скрытие, а затем показ фактически не выполняется. Шоу и прятки идут, но сразу за ними между ними нет паузы в 1 с.

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

Syn

Ответы [ 2 ]

2 голосов
/ 23 октября 2009

Виктор прав, если вы установили два таймаута с одинаковой задержкой, они оба сработают почти в одно и то же время. Если вы хотите показать следующий div сразу после того, как закончите скрывать предыдущий, jQuery выдает обратный вызов в методе скрытия , чтобы сделать именно это.

В любом случае, это действительно ненужное количество сценариев, которые у вас есть. Вместо этого я предлагаю что-то вроде: 

$(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. Это не так, нет никакого преимущества для можно получить, используя это только для объединения строк; на самом деле это медленнее.)

1 голос
/ 23 октября 2009

это 

            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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...