Controlling the counter speed - Pure js-CodePudding

I have 4 counters , each of them should count to a value different from the other's But I want them to start and end at the same time , can this be achieved using pure js

let count1 = 0,
count2 = 0,
count3 = 0,
count4 = 0
let first = document.getElementById("projects")
let second = document.getElementById("clients")
let third = document.getElementById("awards")
let fourth = document.getElementById("countries")
let firstInterval = setInterval(counter1,100)
let secondInterval = setInterval(counter2,100)
let thirdInterval = setInterval(counter3,100)
let fourthInterval = setInterval(counter4,100)
function counter1(){
    if(count1 > 127){
        clearInterval(firstInterval)
    }
    count1  
    first.innerHTML = count1
}
function counter2(){
    if(count2 > 63){
        clearInterval(secondInterval)
    }
    count2  
    second.innerHTML = count2
}
function counter3(){
    if(count3 > 18){
        clearInterval(thirdInterval)
    }
    count3  
    third.innerHTML = count3
}
function counter4(){
    if(count4 > 27){
        clearInterval(fourthInterval)
    }
    count4  
    fourth.innerHTML = count4
}

CodePudding user response：

Perhaps this modified example can help you:

let count1 = 0,
count2 = 0,
count3 = 0,
count4 = 0
const first = document.getElementById("projects");
const firstLimit = 127;
const second = document.getElementById("clients");
const secondLimit = 63;
const third = document.getElementById("awards");
const thirdLimit = 63;
const fourth = document.getElementById("countries");
const fourthLimit = 27;
const time = 3000;

const firstInterval = setInterval(counter1, time / firstLimit)
const secondInterval = setInterval(counter2, time / secondLimit)
const thirdInterval = setInterval(counter3, time / thirdLimit)
const fourthInterval = setInterval(counter4, time / fourthLimit)
function counter1(){
    if(count1 > firstLimit){
        clearInterval(firstInterval)
    }
    count1  
    first.innerHTML = count1
}
function counter2(){
    if(count2 > secondLimit){
        clearInterval(secondInterval)
    }
    count2  
    second.innerHTML = count2
}
function counter3(){
    if(count3 > thirdLimit){
        clearInterval(thirdInterval)
    }
    count3  
    third.innerHTML = count3
}
function counter4(){
    if(count4 > fourthLimit){
        clearInterval(fourthInterval)
    }
    count4  
    fourth.innerHTML = count4
}

<div id="projects"></div>
<div id="clients"></div>
<div id="awards"></div>
<div id="countries"></div>

CodePudding user response：

You could just stop all the intervals whenever one stops so just call stopIntervals() inside of all ifs rather then stoping one interval

function counter4(){
    if(count4 > 27){
        stopIntervals()
    }
    count4  
    fourth.innerHTML = count4
}

function stopIntervals(){
    clearInterval(firstInterval)
    clearInterval(secondInterval)
    clearInterval(thirdInterval)
    clearInterval(fourthInterval)

}