Javascript setInterval 适用于所有元素(多个计数器)

Question

这个问题已经有答案了:

JavaScript closure inside loops – simple practical example (45 个回答)

已关闭 6 年前。

我正在尝试使用 javascript 和 setInterval 在同一页面上创建多个计数器。

我的代码中的问题是它只更新最后一个元素。

var newvalue;
var counterworld = document.getElementsByClassName('counterworld');
for (var i = 0; i < counterworld.length; ++i) {
    var item = counterworld[i];
    var counterId = setInterval(function () { item.innerHTML = i + '=>' + countUp(item.getAttribute('data-start'), item.getAttribute('data-increment')) }, 100);
}
function countUp(start, increment) {
    if (newvalue == null) {
        newvalue = parseFloat(start) + parseFloat(increment);
    }
    else {
        newvalue = newvalue + parseFloat(increment);
    }
    if (increment < 1) {
       return newvalue.toLocaleString(undefined, { maximumFractionDigits: 2 });
}
else {
    return newvalue.toLocaleString(undefined, { maximumFractionDigits: 0 });

    }
}

<span class="counterworld" data-increment="1.5" data-start="100">100</span><br />
<span class="counterworld" data-increment="1.28600823045268" data-start="19216060382458.4">19216060382458.4</span><br />
<span class="counterworld" data-increment="0.0317532880531423" data-start="4629347058.7918">4629347058.7918</span>

Answer 1

将 lexical scoping 的 var i 更改为 let i，将 var item 更改为 let item :

var counterworld = document.getElementsByClassName('counterworld');

for (let i = 0; i < counterworld.length; ++i) {
  let item = counterworld[i];
  let value = parseFloat(item.getAttribute('data-start'));
  let increment = parseFloat(item.getAttribute('data-increment'));

  setInterval(function() {
    value += increment;

    item.innerHTML = i + '=>' + value.toLocaleString(undefined, {
      maximumFractionDigits: increment < 1 ? 2 : 0
    });
  }, 100);
}

<span class="counterworld" data-increment="1.5" data-start="100">100</span><br />
<span class="counterworld" data-increment="1.28600823045268" data-start="19216060382458.4">19216060382458.4</span><br />
<span class="counterworld" data-increment="0.0317532880531423" data-start="4629347058.7918">4629347058.7918</span>

更新

我还修复了你的代码。我希望您有意产生上述行为。