Как напечатать список с задержкой между каждым элементом в HTML - PullRequest
Новая
       8

Как напечатать список с задержкой между каждым элементом в HTML

2 голосов
/ 01 октября 2019 
<html>
    <body>
        //Id for each item
        <p id=1></p>
        <p id=2></p>
        <p id=3></p>
        <script>
            for(i = 0; i < 3; i++) {
                window.setTimeout(press, 1000);
                //Should use For loop variable to fetch and print specific element's Id
                function press() {
                    document.getElementById(i).innerHTML = i;   
                }
            }
        </script>
    </body>
</html>

Я немного новичок во всем этом. Большинство этих команд я получил от w3schools, и я просто пытаюсь собрать все вместе по кусочкам.

Ответы [ 4 ]

5 голосов
/ 01 октября 2019

Вы можете передать аргумент функции тайм-аута, чтобы мы могли использовать его для отображения первого значения, затем увеличить его и снова запустить тайм-аут, если значение равно <= 3: 

window.setTimeout(press, 1000, 1);
//Should use For loop variable to fetch and print specific element's Id
function press(j) {
  document.getElementById(j).innerHTML = j;
  if (++j <= 3) window.setTimeout(press, 1000, j);
}
//Id for each item
<p id=1></p>
<p id=2></p>
<p id=3></p>
3 голосов
/ 01 октября 2019

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

Сначала давайте начнем с некоторой чистой, действительной разметки: 

<html>
  <body>
    <div class="popIn">
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
      <p>Paragraph 3</p>
    </div>      
  </body>
</html>

Теперь ваш CSS (например, в<style> тег в <head>), добавьте анимацию ключевого кадра, которая устанавливает видимость на visible прямо в последнюю секунду: 

@keyframes popIn {
  99% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }
}

Теперь добавьте правило, чтобы выбрать всех прямых потомков .popIn. В этом селекторе > означает прямой потомок, а * означает что угодно. Правило настроит нашу анимацию. 

.popIn > * {
  animation: 1s popIn;
  animation-fill-mode: forwards;
  visibility: hidden;
}

Если вы запустите этот код сейчас, вы увидите, что через 1 секунду все появляется сразу. Все, что нам нужно сделать, это выбрать отдельные абзацы по порядку и изменить продолжительность анимации. 

.popIn *:nth-child(2) {
  animation-duration: 2s;
}

.popIn *:nth-child(3) {
  animation-duration: 3s;
}

Теперь абзацы будут отображаться один за другим, и сценарии не понадобились!

2 голосов
/ 01 октября 2019

В вашем случае setTimeout срабатывает только один раз, так как он не ждет с циклом, а i объявляется в области видимости, следовательно, после цикла оно равно 3.

Вы можете использовать setInterval следующим образом для передачи аргумента и сделать clearInterval, когда i превышает число paras: 

let i = 1;

const a = window.setInterval(press, 1000, i);

//Should use For loop variable to fetch and print specific element's Id
function press() {
  document.getElementById(i).innerHTML = i++;
  if (i > 3)
    window.clearInterval(a);
}
//Id for each item
<p id="1"></p>
<p id="2"></p>
<p id="3"></p>
1 голос
/ 01 октября 2019

Или, в качестве альтернативы, вы можете сделать петли так: 

<html>
<body>
    //Id for each item
    <p id=1></p>
    <p id=2></p>
    <p id=3></p>
    <script>
        function press(i) {
            if (i < 3) {
                setTimeout(function () {
                    i++;
                    document.getElementById(i).innerHTML = i;
                    press(i);
                }, 1000);
            }
        }
        press(0);
    </script>
</body>
</html>
...