[JavaScript]무한 슬라이딩 윈도우

 

무한슬라이딩 윈도우 구현

아이디어

ul의 li로 이미지가 1,2,3이 나란히 있다고 하자.

이미지 1을 추가하여 1,2,3,1 이미지를 만든다.

1,2,3,1까지 슬라이딩 효과를 주는데, 마지막 1번에서 슬라이딩 효과를 없앤 후 바로 1번 위치 변경,

그리고 다시 슬라이딩 효과를 주면 된다.

문제점

애니메이션 효과를 지우고,

처음 위치로 이동하고,

애니메이션 효과를 주는 작업을 reset 작업이라 하자.

reset작업에서 재빨리 애니메이션 효과를 다시 부여했을 때 처음에 지우고 이동했음에도 애니메이션 효과로 이동하게 된다.

따라서 나는 setTimeout으로 시간 간격을 두어 처리하도록 하였다.

이 문제를 찾고 해결하는데 4시간이 걸렸다.

자바스크립트는 도대체 어떻게 돌아가먹는 질 모르겠다. 제대로 알고 쓰려면 시간을 꽤나 투자해야할 것 같다.

왜 문제를 찾는데 4시간이나 걸렸을까?

위 그림처럼 시간의 흐름을 그리지 않고 시작했다. 즉, 설계도를 그리지 않았다.

설계도를 그리지 않으니 무엇이 잘못됬는지, 무엇이 맞았는지 명확히 알기 어려웠다. 일부분 점검해보고 setTimeout의 race condition문제인가 싶어서 설계없이 또 작성해보고...

또 시간 순서를 엄밀히 고려하지 않았기 때문에 옳은 부분도 틀렸다 생각하고 헤맸다.

그래서 위 시간흐름도를 고려한 뒤 작성하니 30분 뒤 해결.

시간을 줄이는 노력을 하자.

코드

visualImg : 이미지를 감싸고 있는 ul태그.

promotions : 이미지 json Array

transitionTime : 이미지 전환 시간, 1초.

displayTime : 전환되는 시간 포함 이미지가 보여지는 시간, 2초.

pageWidth : 슬라이딩 윈도우 가로 길이

function slide() {
    count += 1;
    if (count == promotionsLength) {

        setTimeout(() => {
            visualImg.style.transition = "";
            visualImg.style.transform = "";
            visualImg.style.left = 0 + "px";
            //바로 바꾸면 안 된다. 그래서 setTImeout으로 설정.
            setTimeout(() => {
                visualImg.style.transition = transitionTime + "ms";
                visualImg.style.transform = "all";    
            }, 10);

            setTimeout(() => {
                count = 1;
                visualImgLeft = -pageWidth;
                visualImg.style.left = visualImgLeft + "px";
                slide();
            }, transitionTime);
        }, transitionTime);
    } else {
        setTimeout(() => {
            visualImgLeft -= pageWidth;
            visualImg.style.left = visualImgLeft + "px";
            slide();
        }, displayTime);
    }
}