How to print a list with a delay between each item in HTML

问题

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

I'm a bit of a noob to all of this. Most of these commands I got from w3schools and I'm just trying to piece everything together bit by bit.

回答1:

You can pass an argument through to the timeout function, so we can use that to display the first value, then increment it and start the timeout again if the value is <= 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>

回答2:

An alternative to JavaScript would be to use CSS for this. As a bonus, your page will still work even if JavaScript is disabled.

First, let's start with some clean, valid markup:

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

Now, your CSS (such as in a <style> tag in <head>), add a keyframe animation that sets the visibility to visible right at the last second:

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

Now, add a rule to select all direct descendants of .popIn. In this selector, > means direct decendant of, and * means anything. The rule will set up our animation.

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

If you run this code now, you'll see that after 1 second, everything appears all at once. All we have to do is select the individual paragraphs in-order and change the animation duration.

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

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

Now, the paragraphs will display one after the other, and no scripting was necessary!

回答3:

In your case the setTimeout fires only once as it isn't waiting with the loop and i being declared in the scope, hence after the loop it is equal to 3.

You could use setInterval as follows to pass the argument and do a clearInterval when i exceeds number 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>

回答4:

Or alternatively you could make the loops like this :

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

来源：https://stackoverflow.com/questions/58177666/how-to-print-a-list-with-a-delay-between-each-item-in-html

标签

javascript

html

list

for-loop

delay