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

Soy un poco novato en todo esto. La mayoría de estos comandos los obtuve de w3schools y solo estoy tratando de reconstruir todo poco a poco.

2
Yeetster 1 oct. 2019 a las 06:22

4 respuestas

La mejor respuesta

Puede pasar un argumento a la función de tiempo de espera, para que podamos usarlo para mostrar el primer valor, luego incrementarlo e iniciar el tiempo de espera nuevamente si el valor es <= 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>
5
Nick 1 oct. 2019 a las 03:34

O, alternativamente, podría hacer los bucles de esta manera:

<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>
1
Hasta Dhana 1 oct. 2019 a las 03:43

Una alternativa a JavaScript sería usar CSS para esto. Como beneficio adicional, su página seguirá funcionando incluso si JavaScript está deshabilitado.

Primero, comencemos con un marcado limpio y válido:

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

Ahora, su CSS (como en una etiqueta <style> en <head>), agregue una animación de fotograma clave que establezca la visibilidad en visible justo en el último segundo:

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

Ahora, agregue una regla para seleccionar todos los descendientes directos de .popIn. En este selector, > significa descendiente directo de, y * significa cualquier cosa. La regla configurará nuestra animación.

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

Si ejecuta este código ahora, verá que después de 1 segundo, todo aparece de una vez. Todo lo que tenemos que hacer es seleccionar los párrafos individuales en orden y cambiar la duración de la animación.

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

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

Ahora, los párrafos se mostrarán uno tras otro, ¡y no fue necesario crear secuencias de comandos!

3
Brad 1 oct. 2019 a las 03:46

En su caso, setTimeout se dispara solo una vez, ya que no está esperando con el bucle y i se declara en el alcance, por lo tanto, después del bucle es igual a 3.

Puede usar setInterval de la siguiente manera para pasar el argumento y hacer un clearInterval cuando i excede el número 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>
2
shrys 1 oct. 2019 a las 03:50