setTimeout 질문

19.11.02 23:09 작성 조회수 127

0

강의 따라하면서 for문 안에 setTimeout을 썼는데 지금은 정상작동을 하는 것 같습니다.

자바스크립트가 업데이트 된 것인가요??

course-thumbnail

웹 게임을 만들며 배우는 자바스크립트

JS로 HTML 태그 선택하기

강의실 바로가기

답변 4

·

답변을 작성해보세요.

0

JJanmo님의 프로필

JJanmo

2019.11.19

지나가는 자린이입니다 ^^;; for문에서 사용하신 변수 스코프 차이 때문에 발생한 현상같습니다. 올려주신 코드에서는 for(let i ~~~)라고하셨기때문에 let의 스코프가  { }안에서 적용되어서 값이 알맞게 할당(?)되어서 가능한거같습니다. 선생님께서 사용하신 코드는 for(var i~~~)라고 쓰셨기 때문에 var의 스코프가 function(여기서는 window 전역)이 됩니다. 그래서 결국 비동기함수가 실행되는 시점에는 i가  마지막값으로 변해있기때문에  안되는 거고요. 즉, for문에서 변수 선언에 있어서 var냐 let이냐에 따라서 달라진것같네요... 저도 자바스크립를 배우는 입장이라...틀린부분있다면 지적해주시면 감사하겠습니다. 

ps1.혹시 이해가 잘안되셨다면,,,

https://www.daleseo.com/js-var-issues/ 

여기부분 참고하시길...(이렇게 사이트 올려도 되는지모르겠지만 저도 사이트를 참조해서요 ;;)

ps2. 이렇게 해결하는 방법도 있네요...

    for (var i = 0; i < winNum.length; i++) {
      let num = winNum[i];
      setTimeout(() => {
        const ball = document.createElement("div");
        ball.textContent = num;
        win.appendChild(ball);
      }, 1000 * (i + 1));
   }

0

ㅇㅇ님의 프로필

ㅇㅇ

질문자

2019.11.07

궁금해서 그러는데 답변부탁드립니다. ㅠㅠ

0

ㅇㅇ님의 프로필

ㅇㅇ

질문자

2019.11.03

const win = document.querySelector(".win");
const bonus = document.querySelector(".bonus");

const candidate = Array(45)
  .fill()
  .map((e, i) => i + 1);

const shuffle = [];

while (candidate.length > 0) {
  const value = candidate.splice(
    Math.floor(Math.random() * candidate.length),
    1
  )[0];
  shuffle.push(value);
}

const winNum = shuffle.slice(0, 6).sort((p, c) => p - c);
const bonusNum = shuffle[shuffle.length - 1];

console.log(winNum);

for (let i = 0; i < winNum.length; i++) {
  setTimeout(() => {
    const ball = document.createElement("div");
    ball.textContent = winNum[i];
    win.appendChild(ball);
  }, 1000 * (i + 1));
}

setTimeout(() => {
  const bonusBall = document.createElement("div");
  bonusBall.textContent = bonusNum;
  bonus.appendChild(bonusBall);
}, 7000);

전체 코드입니다.

이렇게 하니까 당첨숫자도 1초마다 차례대로 나오면서 정상작동이 됩니다....

정상작동이 돼서 저도 당황했습니다.

0

조현영님의 프로필

조현영

지식공유자

2019.11.03

아뇨 정상작동을 하면 안 됩니다. 어떤 코드를 사용하셨나요?

이 글과 비슷한 Q&A