Блог

Главная - Вопросы по программированию - Простые счетчики — набор данных работает неправильно

Простые счетчики — набор данных работает неправильно

#javascript #intersection-observer

Вопрос:

Я работаю на сайте, на котором много счетчиков, и у меня проблема с получением [скорости передачи данных] для создания разных скоростей счетчиков в зависимости от числа в этом счетчике.

Когда я выполняю этот цикл по каждому элементу, я всегда получаю одинаковую скорость, функция получает наибольшее число из всех счетчиков.

Есть идеи, где я ошибся?

 const counters = document.querySelectorAll('.counter');
let i = 0;

const io = new IntersectionObserver(entries => {

  entries.forEach(entry => {
    const finalNumber = entry.target.innerText; 
    const speed =  entry.target.dataset.speed; 

    if (entry.isIntersecting) {
      entry.target.innerText = i;

      const interval = setInterval(() => {
        entry.target.innerText = i  = speed;

        if (i >= finalNumber) {
          entry.target.innerText = finalNumber;
          clearInterval(interval);
        }
      }, 10)
    }
  })
})

counters.forEach(item => io.observe(item)) 
 <h1 class="counter" data-speed="1">1000</h1>
<h1 class="counter" data-speed="2">1000</h1>
<h1 class="counter" data-speed="3">1000</h1>
<h1 class="counter" data-speed="4">1000</h1>
<h1 class="counter" data-speed="5">1000</h1>

Ответ №1:

Я не знаю, как помочь вам с вашим кодом, но я запрограммировал альтернативный способ достижения этого, который может оказаться полезным.

 const counters = document.querySelectorAll('.counter'), speeds = [];
var x = [], y = 0;

for(counter of counters){
  x.push(y);
  speeds.push(parseInt(counters[y].getAttribute('data-speed')));
  y  ;
}

for(var i = 0; i < counters.length; i  ){
  (function(i) {
    var interval = setInterval(() => { 
        x[i] = x[i]   speeds[i];
        counters[i].innerHTML = x[i];
        if(x[i] === 1000){clearInterval(interval)}
        if(x[i] > 990){speeds[i] = 1}
      }, 1)
  })(i);
} 
 <h1 class="counter" data-speed="1"></h1>
<h1 class="counter" data-speed="2"></h1>
<h1 class="counter" data-speed="3"></h1>
<h1 class="counter" data-speed="4"></h1>
<h1 class="counter" data-speed="5"></h1>
Метки: