从随机字符到预定义字符的Javascript字符串动画

Question

我正在构建动画，它将在data-final属性中定义的值上停止，并为每个字符顺序停止-我希望这段代码对每个符号有不同的动画持续时间，但它们都同时结束，尽管duration设置正确- 1000,2000，...，8000。如何在此处按顺序停止动画？

​

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>

​

Answer 1

您忘记将duration定义为var (或let，这应该是相同的，因为它无论如何都是一个函数作用域)。如果不这样做，就会使它成为一个在循环的所有迭代之间共享的全局变量。

这变成了(这里使用var，因为其他人也在使用它)：

​

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>

​