transition, setInterval(), setTimeout() 관련 질문드립니다.

[남윤아]

안녕하세요 코딩애플님!
javascript강의 너무 재밌어서 수강시작한지 2~3주만에 완강하고 배운내용을 복습차 총 3개의 사진을 가지고 무한 캐러셀 만들기를 
하던 중 궁금한 점이 생겨 질문 드립니다.
단방향 무한 캐러셀을 만들기 위해선 사진을 1, 2, 3, 1 총 네개를 배치하고 마지막 1번 사진에 도달하였을때 'transition: none'으로 하고
마지막 1번 사진에서 첫번째 1번 사진으로 이동시킨 후 다시 'transition: all 0.5s' 적용하여 마치 무한으로 도는것 처럼 구현하는 것으로
알고있습니다.
따라서, 처음엔 위 내용을 통해 다음과 같은 JS 코드를 작성하였습니다.

function infiniteCarousel(box, pic_num, max_pics, box_width) {
  pic_num++;
  if (pic_num >= max_pics) {
    pic_num = 0;
    $(box).css('transition', `none`);
    $(box).css('transform', `translateX(0px)`);
    pic_num++;
    $(box).css('transition', `all 0.5s`);
    $(box).css('transform', `translateX(${(-1) * pic_num * box_width}px)`);
  }
  else {
    $(box).css('transform', `translateX(${(-1) * pic_num * box_width}px)`);
  }
}

let cloth_carousel = setInterval(() => {
  infiniteCarousel('.cloth .container', cloth_curPic, cloth_maxPicnum, cloth_w)

}, 2000);

그런데, 막상 돌려보니 '$(box).css('transition', `none`);' 이 적용이 되지 않아 원하는데로 작동하지 않았습니다.
디버깅했을땐 잘되는데, 전체적으로 돌려봤을때 'transition: none' 이 적용되지 않는.... 이해하기 힘든 에러가 발생하였습니다.
다행히 구글링을 통해 첫번재 1번 사진에서 2번 사진으로 넘어가는 구간에 setTimeout(0초)를 주면 된다고 해서 다음과 같이 
코드를 수정하였고 

function infiniteCarousel(box, pic_num, max_pics, box_width) {
  pic_num++;
  if (pic_num >= max_pics) {
    pic_num = 0;
    $(box).css('transition', `none`);
    $(box).css('transform', `translateX(0px)`);
    setTimeout(() => {
        pic_num++;
        $(box).css('transition', `all 0.5s`);
        $(box).css('transform', `translateX(${(-1) * pic_num * box_width}px)`);
    }
  }
  else {
    $(box).css('transform', `translateX(${(-1) * pic_num * box_width}px)`);
  }
}

let cloth_carousel = setInterval(() => {
  infiniteCarousel('.cloth .container', cloth_curPic, cloth_maxPicnum, cloth_w)
}, 2000);
원하는 기능을 구현할 수 있었습니다.

그런데, 왜 setTimeout을 주면 에러가 해결되는지 모르겠습니다.
setTimeout을 다음과 같이 줬을때는 무한 캐러셀이 되지만 첫번째 1번 사진에서 2번 사진으로 넘어갈 때 동작 주기가 
다른 주기보다 길어지는 에러가 발생하였습니다.
 setTimeout(() => {
  pic_num = 0;
  $(box).css('transition', `none`);
  $(box).css('transform', `translateX(0px)`);
}

따라서,
1. 왜 처음 작성된 코드에는 'transition: none'이 적용되지 않는지,
2. 왜 setTimeout을 두번째 작성된 코드 처럼 작성했을때는 원하는 기능이 구현됐는지,
3. 왜 setTimeout을 세번째 작서어된 코드 처럼 작성했을때는 원하는 기능은 구현되지만 특정구간에만 delay가 길어지는지 궁금합니다

[codingapple]

pic_num은 ++ 해봤자 계속 함수실행할 때마다 첫값으로 초기화될텐데
cloth_curPic++ 하면서 거기에 현재 몇번째인지 저장해두는게 나을듯요

[남윤아]

안녕하세요 코딩애플님!
코딩애플님 말씀데로 수정하였고 setInterval() 내에 setTimeout() 유무와 위치에 따라 결과물에 달라짐을 확인할 수 있었습니다
setTimeout() 없는 경우: 캐러셀(실패)
setTimeout() 제대로 위치한 경우: 캐러셀(성공)
setTimeout() 제대로 위치하지 않은 경우: 캐러셀(망가짐)

왜 setTimeout에 따라 'transition: none' 적용 여부가 달라지는지, 원하는 기능 성공 실패가 결정되는지 궁금합니다..ㅠㅠ

[codingapple]

아마 자바스크립트 코드들 실행이 한번 다 끝나고나서야 변경사항을 한 번에 브라우저에 그려줘서 그런가봅니다
setTimeout쓰면 그 안의 코드들 실행을 잠깐 물리적으로 늦출 수 있습니다

[남윤아]

감사합니다 코딩애플님! 덕분에 궁금증도 해결됐고, 추가로 브라우저 동작 과정도 공부할 수 있는 시간을 갖을 수 있었습니다. 감사합니다!

[글쓴이]

글