setInterval止损率为1%

Question

我试图用setInterval同时动画三个计数器。

计数器应该分别停止在10、20和30，我已经将这些数字保存在一个数组data中，并将它们传递给setInterval的参数，然后当变量counter1, counter2, counter3大于或等于它们的clearInterval(this)数10, 20, 30时，它们就应该停止了。

问题是他们都停在了1%，我不知道为什么.

​

const data = ['10', '20', '30'],
  item = document.getElementsByClassName('test');
  
let counter1 = 0,
  counter2 = 0,
  counter3 = 0;

function go(current, data, item) {
  if (current >= data) {
    clearInterval(this);
  } else {
    current++;
    item.textContent = current + '%';
  }
}

let go1 = setInterval(go, 10, counter1, data[0], item[0]),
  go2 = setInterval(go, 10, counter2, data[1], item[1]),
  go3 = setInterval(go, 10, counter3, data[2], item[2]);

<p class="test">0</p>
<p class="test">0</p>
<p class="test">0</p>

​

Answer 1

回调之外的计数器变量不会受到回调中的counter++的影响。相反，使用计数器数组并传入计数器的索引以进行检查。

​

const data = ['10', '20', '30'],
  item = document.getElementsByClassName('test');
  
let counters = [0, 0, 0];

function go(index, data, item) {
  if (counters[index] >= data) {
    clearInterval(this);
  } else {
    counters[index]++;
    item.textContent = counters[index] + '%';
  }
}

let go1 = setInterval(go, 10, 0, data[0], item[0]),
  go2 = setInterval(go, 10, 1, data[1], item[1]),
  go3 = setInterval(go, 10, 2, data[2], item[2]);

<p class="test">0</p>
<p class="test">0</p>
<p class="test">0</p>

​

还可以进行简化，以便只传递索引，然后将其用于data和item数组。

Answer 2

只要传递一个引用items、data和counters数组的索引，就可以大大简化它。

​

const data = [10, 20, 30],
  items = Array.from(document.getElementsByClassName('test'));

let counters = [0, 0, 0]

function go(index) {
  if (counters[index] >= data[index]) {
    clearInterval(this);
  } else {
    items[index].textContent = ++counters[index] + '%';
  }
}

let intervals = items.map((item, index) => setInterval(go, 100, index))

<p class="test">0</p>
<p class="test">0</p>
<p class="test">0</p>

​

Answer 3

current的值永远不会改变，因为您的间隔回调总是用相同的值调用。我将使用setTimeout，而只是使用更新参数调用go (如果是current <= data )。

​

const data = ['10', '20', '30'];
const item = document.getElementsByClassName('test');
  
let counter1 = 0;
let counter2 = 0;
let counter3 = 0;

function go(current, data, item) {
  if (current <= data) {
    item.textContent = current + '%';
    setTimeout(go, 10, ++current, data, item);
  }
}

go(counter1, data[0], item[0]);
go(counter2, data[1], item[1]);
go(counter3, data[2], item[2]);

<p class="test">0</p>
<p class="test">0</p>
<p class="test">0</p>

​