글을 쓰게된 계기
페어 프로그래밍을 하며 일주일동안 많은 기능을 구현해보았는데, 그 때 가장 많이 사용했던 함수는 setTimeout이었다. setTimeout은 두 번째 인수로 전달받은 시간이 만료되면 첫 번째 인자로 전달받았던 콜백함수가 실행이 되는 함수이다. 주로 FOIT 문제 해결, 원하는 타이밍에 기능을 실행시키기위해 많이 사용했다. transition이 발생할때도 그 trnasition을 해결하기위해 setTimeout을 사용했는데, 내가 원했던 결과가 도출되지 않았다. 진짜 이 transition해결하려고 2시간동안 온갖 시도를 했지만 결국 해결하지 못했고 힌트를 얻고 겨우 해결했다. 그래서 그때 얻었던 가르침을 한 번 블로그에 풀어나가보고자 한다.
setTimeout vs setInterval
setTimeOut은 함수는 전달받은 시간 이후 단 한 번 실행되도록 호출 스케쥴링이 된다. 반면 setInterval은 일정 시간 간격을 두고 함수를 실행하는 방법이다.
mdn의 정의에서는 지연시간뒤에 코드가 실행된다고 적혀있다.
setTimeout은 단 한번만 실행되지만 setInterval은 기본 동작이 반복적으로 일어난다는 차이점이 있다.
하지만 둘의 공통점은 둘 다 비동기 함수라는 것이다. 비동기함수?? 나중에 비동기에 대해서도 자세히 다루어볼 예정이지만 간단히 설명하자면 비동기 함수는 한 번에 하나의 일만 처리하는 것이 아니라 여러개의 일을 동시에 처리하는 것이다. setTimeout과 setInterval를 사용하는 이유는 싱글 스레드인 자바스크립트에서 시간을 재는 일을 해버리면 다른일을 못하니까... 멀티 쓰레드인 브라우저에게 시간을 재달라고 넘기는 것이다.
이런 특징덕분에 setTimeout은 일정 시간 이후에 배너, 팝업창을 띄울때 많이 사용된다.
setTimeout을 사용하지 못하는 경우
이런 호출 스케쥴링이 된다는 장점 덕분에 상당히 많이 활용이되는데 사용하지 못하는 경우도 존재한다.
transition이 발생할 때, 지연 시간을 0.001초로 주며 최소한으로 transition을 만들고자했지만, setTimeout을 사용해 해결하려보다보니 예기치 못한 문제가 잔뜩 발생했다.
mdn의 설명처럼 정확한 지연시간 이후에 콜백함수가 작동하는것이 아니라 실제 지연시간은 더 길어질 수 있다. 즉, 정확한 지연시간을 보장해주지 않는다는 것이다. 그래서 정확한 시간 이후에 콜백 함수가 작동해야하는 경우에는 setTimeout을 사용하지 못한다 (setInterval도 setTimeout과 마찬가지로 정확한 지연시간을 보장해주진 못한다)
해결방안
이 때는 setTimeout을 사용하는것이 아니라 transitionend를 사용해야한다. transitionend는 지연 시간이 없다면 이벤트는 발생하지않고, 만약 지연 시간이 존재할때만 작동한다. 이런 특징을 이용해 transition이 발생할때 transitionend를 발생시키고, 끝이 나면 그때부터 클릭을 인식하도록 하는 방법이다.
결론
함수의 특징을 정확히 알지 못하다보니 이렇게 몇시간 동안 삽질을 했다...물론 그 과정에서 배운것도 무척 많지만 이런 함수를 알게된다면 꼭 mdn을 끝까지 읽어보아야겠다. 그리고 함수마다 이렇게 다양한 특징이 있다는것이 정말 신기하고 재미있었다. 앞으로 특징을 살려 함수를 활용해보아야겠다.
