재미있는 코딩 - 다양한 속도로 여러 카운터 ⏱️ 시작

때때로 나는 내가 스택 오버플로 중독자라고 생각합니다 🤪... 그리고 몇 달 전에 this question을 보았을 때 내 중독은 더 심해졌고 그것을 다루는 것을 손가락으로 참을 수 없었습니다.

주요 아이디어는..

🛠️ HTMLspeed 태그 요소의 span 속성에 설정된 값에 따라 카운터가 다른 속도로 시작되도록 하는 JavaScript 알고리즘을 빌드합니다.

다른 사람들과 공유할 수 있는 흥미롭고 재미있는 코드라고 생각합니다.

스니펫을 사용해보고 싶다면 👉click here

계속하기 전에..

I've written this post in great detail so that it can be understood by begginers. The idea of the post is to have fun programming, learn/practice a few things, experiment and maybe come up with a different or even a better solution that the one I came up with.

If(you_want_to_continue === true) console.log('keep scrolling..')
else console.log('see you! 👋') 

☕를 들고 시작해 봅시다!

좋아하는 JS 코드 편집기(JSFiddle는 매우 훌륭함)로 이동하여 HTML을 설정합니다.

<h1 class="counter" speed='3'></h1>
<h1 class="counter" speed='7'></h1>
<h1 class="counter" speed='10'></h1>
<h1 class="counter" speed='12'></h1>

보시다시피 speed 요소에 h1 속성을 추가했습니다. 클래스counter는 JS에게 querySelectorAll()을 사용하여 선택하려는 요소를 알려주는 것입니다.

이제 HTML 코드가 준비되었으므로 프로그래밍을 시작할 시간입니다.

elements const를 선언하자

const elements = document.querySelectorAll('.counter')

💬 문서 메소드querySelectorAll()는 지정된 선택자 그룹과 일치하는 문서의 요소 목록을 나타내는 정적 NodeList를 반환합니다.

🧐 따라서 이 경우 elements에는 h1 클래스가 있는 모든 counter 요소가 포함됩니다.
console.log(elements) 출력:

{
  "0": <h3 class="counter" speed="6"></h3>,
  "1": <h3 class="counter" speed="7"></h3>,
  "2": <h3 class="counter" speed="8"></h3>,
  "3": <h3 class="counter" speed="9"></h3>,
  "item": function item() {
    [native code]
},
  "keys": function keys() {
    [native code]
},
  "values": function values() {
    [native code]
},
  "entries": function entries() {
    [native code]
},
  "forEach": function forEach() {
    [native code]
},
  "length": 4
}

별로 좋아 보이지는 않지만 알아요. 하지만 elements에 액세스하는 것은 간단합니다.

🗝️ 키elements[key]로 액세스할 수 있습니다. 예를 들어 elements['1']는 다음 HTML 요소를 반환합니다.

<h3 class="counter" speed="7"></h3>

이제 우리는 정적 NodeListelements를 검색하고 작업하는 방법을 이해했으므로 elements의 모든 HTML 요소에 대한 간격을 설정하는 함수를 만들어 논리를 빌드해 보겠습니다.

function setCounter(element, speed, limit){
  let count = 0  // every count will start from 0

  let interval = setInterval(() => {
    // in every interval the count will increment by the speed value 
    count += speed

    // update the HTML in this specific element  
    element.innerHTML = count

    // stop the setInterval() if condition is met
    if(count >= limit) clearInterval(interval)

}, 1) // <--- the interval will loop every 1 millisecond
}

이제 setCounter() 함수가 준비되었으므로 모든 요소를 ​​반복하여 속도를 검색하고 setCounters()를 호출해야 하지만 그 전에 모든 속도를 얻고 사용하는 방법을 명확히 해야 합니다.


속도를 검색하려면 속성을 가져올 요소를 지정해야 합니다.
elements[key].getAttribute('speed')
💬 .getAttribute()를 사용하면 리턴 값이 문자열로 옵니다. 이것은 다음과 같이 typeof를 사용하여 증명할 수 있습니다.

let key = '1'
let value = elements[key].getAttribute('speed')
console.log(typeof value) // --> string

코드가 작동하도록 하려면 Number() 또는 parseInt() 를 사용하여 정수로 변환해야 합니다.

그런 다음 setCounter(element, speed, limit)를 호출해야 합니다. 이렇게 하면 해당 매개변수로 각각setInterval이 초기화됩니다.

elements.forEach((el, key) => {
  let speed = Number(elements[key].getAttribute('speed'))
  setCounter(el, speed, 1000) 
})

이제 코드가 완성되었으니 제대로 작동할 것 같습니까?

한 번 해보고 어떤 일이 일어나는지 봅시다. limit에 매개변수로 전달된 setCounter()가 1000라는 점을 고려하십시오.



제대로 작동하지 않았습니다😭... setIntervals 는 작동하지만 count 보다 더 큰 limit 를 보여주고 있습니다. 이는 카운트에 더해지는 speed의 값이 모든 루프에서 합산1이 아니기 때문에 임의의 숫자가 될 수 있으므로 limit를 오버플로할 수 있습니다.

이를 해결하는 한 가지 방법은 다음과 같이 setInterval() 안에 삼항 연산자를 사용하는 것입니다.

count = (count >= limit) ? limit : count + speed

어떻게 작동합니까?

count가 limit보다 크거나 같으면 count는 limit와 같고 반대의 경우 count는 count + speed와 같습니다.

마지막 루프 카운트 문제를 해결하기 위한 마이너 패치입니다. 이렇게 하면 카운트가 한도를 넘지 않습니다.

결과 코드 ✔️

const elements = document.querySelectorAll('.counter')

elements.forEach((el, key) => {
  let speed = Number(elements[key].getAttribute('speed'))
  setCounter(el, speed, 1000)
})

function setCounter(element, speed, limit){
  let count = 0
  let interval = setInterval(() => {
    count = (count >= limit) ? limit : count + speed
    if(count === limit) clearInterval(interval)
    element.innerHTML = count
  }, 1)
}

이것은 내 첫 번째 게시물입니다

자유롭게 코드를 실험/재생하고 고유한 접근 방식을 공유하세요 👍 가지고 있는 경우 🙃