Search code examples
javascriptsettimeoutsetinterval

setInterval / setTimeout for revealing elements one by one

I have a simple for loop inside a rendering function.

        for (let i = 0; i < PLAYER.hand.length; i++) {
      
        playerHTML += `<img class='card' src='images/cards/${PLAYER.hand[i]}.svg'>`;
    }

I am trying to implement a card draw animation. How can I implement that? I tried for example:

for (var i = 0; i < PLAYER.hand.length; i++) {
(function(i) {
    setInterval(function() {
      playerHTML += `<img class='card' src='images/cards/${PLAYER.hand[i]}.svg'>`;
    }, 5000)
})(i)}

did not work for me. any ideas?

Solution

  • you are already using interval so probably dont need the for loop

    (function() {
    let i = 0;
    const interval = setInterval(function() {
      playerHTML += `<img class='card' src='images/cards/${PLAYER.hand[i]}.svg'>`;
      i += 1;
      if (i >= PLAYER.hand.length) {
          clearInterval(interval);
      }
    }, 5000)
})()