Stopping running a code on every scroll

JavaScript
1 
class Counter {
  constructor(id, target, speed, appendString) {
    this.id = id;
    this.target = target;
    this.speed = speed;
    this.appendString = appendString;
  }

  start() {
    const container = document.querySelector(this.id);
    container.innerText = 0;
    let count = 0;

    function updateCount(counter, target, speed, appendString) {
      if (count < target) {
        counter.innerText = `${count} ${appendString}`;
        count++;
        setTimeout(
          () => updateCount(counter, target, speed, appendString),
          speed
        );
      } else {
        counter.innerText = `${target} ${appendString}`;
      }
    }

    updateCount(container, this.target, this.speed, this.appendString);
  }
}

const counter1 = new Counter('#headline-e6423da8', 156, 15, '');
const counter2 = new Counter('#headline-77ad9299', 227, 15, '');
const counter3 = new Counter('#headline-8255ec52', 91, 15, '%');
const counter4 = new Counter('#headline-5e08a0cb', 30, 15, '+');

window.addEventListener('scroll', () => {
  counter1.start();
  counter2.start();
  counter3.start();
  counter4.start();
});
2

are you trying to implement something? let us know more about your concern… happy coding

3

It was an old post. I tried to post a new one, but this one was in the draft. Currently, I’m trying to post a new post, but it is stuck in the draft as well.

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.