Javascript string animated from random chars to pre-defined

Question

I'm building the animation that will stop on the values defined in data-final attributes and will stop sequentially for each char - I expect this code to have different animation duration for each symbol, but they all end simultaneously, though duration is set correctly - 1000, 2000, ..., 8000. How do I stop animation sequentially here?

function count() {
  var letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
  var numbers = "0123456789"
  var string = numbers + letters;
  var allCounters = document.querySelectorAll(".counter > i");

  allCounters.forEach(function(el) {
    duration = 1000 + Array.from(allCounters).indexOf(el) * 1000;
    var interval = setInterval(function() {
    //console.log(duration);            
      if (duration > 0) {
        el.innerText = string.charAt(Math.random() * string.length);
        duration = duration - 50;      
      } else {
        clearInterval(interval);
        el.innerText = el.getAttribute("data-final");
      }
    }, 50);
  });
}

count();

document.addEventListener('click', count)

@import url('https://fonts.googleapis.com/css?family=Orbitron');

* {
  margin: 0;
  padding: 0;
  font-family: Orbitron;
  
}

body, html {
  height: 100%;
  background: salmon;
}

.counter {
  height: 100%;
  letter-spacing: 10px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 50px;
  cursor: pointer;
}

i {
  min-width: 70px;
  text-align: center;
font-style: normal;
}

<div class="counter">
  <i data-final="0"></i>
  <i data-final="1"></i>
  <i data-final="8"></i>
  <i data-final="2"></i>
  <i data-final="5"></i>
  <i data-final="0"></i>
  <i data-final="0"></i>
  <i data-final="0"></i>
  <i data-final="x"></i>
</div>

Jeto · Accepted Answer · 2018-12-22 13:32:37Z

You forgot to define duration as a var (or let, which should be the same since it's a function scope anyway). By not doing so, you made it a global variable that is shared between all iterations of your loop.

This becomes (using var here since the rest is using it as well):

function count() {
  var letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
  var numbers = "0123456789"
  var string = numbers + letters;
  var allCounters = document.querySelectorAll(".counter > i");

  allCounters.forEach(function(el) {
    var duration = 1000 + Array.from(allCounters).indexOf(el) * 1000;        
    var interval = setInterval(function() {
      el.innerText = string.charAt(Math.random() * string.length);
      duration = duration - 50;
      if (duration <= 0) {
        clearInterval(interval);
        el.innerText = el.getAttribute("data-final");
      }
    }, 50);
  });
}

count();

document.addEventListener('click', count)

@import url('https://fonts.googleapis.com/css?family=Orbitron');

* {
  margin: 0;
  padding: 0;
  font-family: Orbitron;
  
}

body, html {
  height: 100%;
  background: salmon;
}

.counter {
  height: 100%;
  letter-spacing: 10px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 50px;
  cursor: pointer;
}

i {
  min-width: 60px;
  text-align: center;
  font-style: normal;
}

<div class="counter">
  <i data-final="0"></i>
  <i data-final="1"></i>
  <i data-final="8"></i>
  <i data-final="2"></i>
  <i data-final="5"></i>
  <i data-final="0"></i>
  <i data-final="0"></i>
  <i data-final="0"></i>
  <i data-final="x"></i>
</div>

Collectives™ on Stack Overflow

Javascript string animated from random chars to pre-defined

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related