블랙커피스터디 - level2 ( racing ) + 비동기

비동기로 반복적인 동작을 실행하고 이를 정지하는 코드

let count = 0;
let timer = setInterval(()=> {
    isGo = carName.map(() => Math.floor(Math.random() * 10) >= 4 ? true : false);
    goCarMove(carNameArray, isGo);
    count++;
    if (count === Number(tryNumber)) {
      clearInterval(timer);
      $All('.relative').forEach(x=>x.remove())
    }
  },1000);

setInterval의 대상을 timer로 하고 안의 내용을 실행하는데 count라는 정지 대상을 지정하여 해당 값을 실행마다 증가시킨 후 그 값이 어떤 값과 만족할때
clearInterval(대상)을 이용하여 setInterval 반복을 종료시키는 역할을 수행한다.

querySelector , querySelectorAll을 반복하여 쓰지않게 만들기

const $ = (selector) => document.querySelector(selector)
const $All = (selector) => document.querySelectorAll(selector)

위의 코드를 사용하여 필요에따라 변수 = $('.클래스이름') or 변수 = $('#id') 형태로 표현 할 수 있다.

현재까지 작성한 Racing Code

const $ = (selector) => document.querySelector(selector)
const $All = (selector) => document.querySelectorAll(selector)

const [carButtonDom,tryButtonDom, restartButtonDom] = $All(".btn-cyan")
const [carNameDom, tryNumberDom] = $All('.w-100');
const progressTitle = $('.mt-4');

let carNameArray,tryNumber,isGo,countArray={};
let carMovingDom;

const splitCarName = (val)=>val.split(',');

const carButtonEvent = carButtonDom.addEventListener('click',()=>{
  carNameArray = splitCarName(carNameDom.value);
})

const tryButtonEvent = tryButtonDom.addEventListener('click',()=>{
  tryNumber = tryNumberDom.value;
  startRacing(tryNumber,carNameArray)
})

const startRacing = (tryNumber,carName)=>{
    let count=0;
    carName.map(val => progressTitle.innerHTML += setting(val));
    carMovingDom = $All('.car-player');
    timerCheck(count,carName);
}

const timerCheck = (count,carName)=>{
  let timer = setInterval(()=> {
    isGo = carName.map(() => Math.floor(Math.random() * 10) >= 4 ? true : false);
    goCarMove(carNameArray, isGo);
    count++;
    if (count === Number(tryNumber)) {
      clearInterval(timer);
      $All('.relative').forEach(x=>x.remove())
    }
  },1000);
}

const goCarMove = (carNameArray,isGo)=>{
  carNameArray.map((val,idx) => {
    if (countArray[val] !== undefined)
      countArray[val] = isGo[idx] ? ++countArray[val] : countArray[val];
    else
      countArray[val] = isGo[idx] ? 1 : 0;
    addMovingDom(isGo,idx)
  })
}

const addMovingDom = (isGo,idx)=>{
  if(isGo[idx])
    carMovingDom[idx].insertAdjacentHTML('afterend',moving());
}

const setting = (carName)=>` <div class="mr-2">
            <div class="car-player">${carName}</div>
            <div class="d-flex justify-center mt-3">
              <div class="relative spinner-container">
                <span class="material spinner"></span>
              </div>
            </div>
          </div>`

const moving = ()=>`<div class="forward-icon mt-2">⬇️️</div>`

const let 설정하기

const $ = (selector) => document.querySelector(selector)
const $All = (selector) => document.querySelectorAll(selector)

const [carButtonDom,tryButtonDom, restartButtonDom] = $All(".btn-cyan")
const [carNameDom, tryNumberDom] = $All('.w-100');
const progressTitle = $('.mt-4');

let carNameArray,tryNumber,isGo,countArray={};
let carMovingDom;

필요에 맞는 대상들을 미리 지정하고 querySelectorAll에 의한 배열일 경우 각각을 만족하는 [ ] 배열형태에 1:1 매치를 시켜준다.

splitCarName , Event

const splitCarName = (val)=>val.split(',');

const carButtonEvent = carButtonDom.addEventListener('click',()=>{
  carNameArray = splitCarName(carNameDom.value);
})

const tryButtonEvent = tryButtonDom.addEventListener('click',()=>{
  tryNumber = tryNumberDom.value;
  startRacing(tryNumber,carNameArray)
})

각각의 차를 입력하고 버튼 누를시와 횟수를 입력하고 버튼을 누를시 발생하는 Event구현

startRacing timerCheck

const startRacing = (tryNumber,carName)=>{
    let count=0;
    carName.map(val => progressTitle.innerHTML += setting(val));
    carMovingDom = $All('.car-player');
    timerCheck(count,carName);
}

const timerCheck = (count,carName)=>{
  let timer = setInterval(()=> {
    isGo = carName.map(() => Math.floor(Math.random() * 10) >= 4 ? true : false);
    goCarMove(carNameArray, isGo);
    count++;
    if (count === Number(tryNumber)) {
      clearInterval(timer);
      $All('.relative').forEach(x=>x.remove())
    }
  },1000);
}

횟수버튼까지 눌렀을때 시작한다.
timerCheck는 비동기에 의해 횟수만큼 반복을 진행하며 각각의 차에대한 goCarMove함수를 실행시켜준다.

goCarMove addMovingDom

const goCarMove = (carNameArray,isGo)=>{
  carNameArray.map((val,idx) => {
    if (countArray[val] !== undefined)
      countArray[val] = isGo[idx] ? ++countArray[val] : countArray[val];
    else
      countArray[val] = isGo[idx] ? 1 : 0;
    addMovingDom(isGo,idx)
  })
}

const addMovingDom = (isGo,idx)=>{
  if(isGo[idx])
    carMovingDom[idx].insertAdjacentHTML('afterend',moving());
}

객체인 countArray에 프로퍼티가 존재하지않는다면 생성키기고 isGo[idx]가 true이면 1을 false이면 0으로부터 시작하고
프로퍼티가 존재하면서 isGo[idx]가 true이면 해당하는 프로퍼티의 값을 1씩 증가시키는 역할을 한다.