JavaScript에서 사용되는 함수이고, 지정한 시간이 지난 후에 실행을 하는것이라는것. 그리고 비동기적으로 동작하는 함수 라는것. 이정도로 알고있었다. 좀 더 들어가면 지정한 시간이 지날때까지 다른 코드를 실행하지 않고 멈추는것이 아니라, 다른 코드는 계속해서 실행이 되다가 setTimeout함수가 실행될 시간이 오면 그때 실행된다는것.
setTimeout에 대해 배우면서 음.. 알겠고 이걸 대체 어디다 써먹는담? 하면서 내린 결론은 비동기를 이해시키기위한 하나의 예시함수(?)라고 생각했다.
그러다 한참 시간이 흐른후 setTimeout을 실용적으로 쓸 수 있는 날이 온 것이다.
문제가 생겼다
앱 개발중 결재 부분에서 결재창을 팝업으로 해주었는데, (페이지가 아닌 팝업으로 해준 이유는 상사분께서 몇가지 유형의 결재 양식은 팝업으로 띄워서 문제를 해결하라고 하셨다. 페이지로 하든 팝업으로 하든 어쨌든 그 안에서 또 팝업을 띄우는 부분이 있는데, 그때마다 헤더부분이 바뀌는것을 해결하는 방법중 하나로 쓰신것이다. )
이 화면에서 연차 신청서로 들어가려고 하는데, 잘 이동하긴 이동한다.
그런데 문제는
더블클릭시 팝업이 두개가 켜지는것을 순간포착한 이미지
더블클릭을 하게 되면 먼저 하나의 팝업이 뜨고 그 팝업위에 또 팝업이 뜨는것이다.
그러니까 헤더가 하나의 화면에 헤더가 두개가 있는것이다.
시도해보았지만 실패한 해결법
버튼이 눌러지면 그 후 버튼을 비활성화 시키는 것으로 해결을 해보려 했으나, 다른 버튼까지도 비활성화가 되는게 문제 였다.
SetTimeout함수를 활용한 해결법
동오대리님께 여쭤봤더니 다른 페이지에서도 이미 해결하신 방법을 내게 알려주셨다.
그건 바로 setTimeout함수를 활용한 해결법인데, setTimeout으로 0.5초로 설정을 해주면, 버튼이 클릭되고 0.5초 동안만 버튼이 비활성화 되는 것이다. 그 후 자동으로 버튼이 활성화 되기 때문에, 0.5초정도의 시간을 주는것으로 문제를 해결했다고 하셨다.
그래서 나도 이렇게 setTimeout함수를 추가해줬더니 중복으로 창이 뜨는것이 해결되었다.
깨달은 점
setTimeout을 ‘저거 어디가 써먹는담’ 했었는데, 이렇게 유용하게 사용할 수 있구나 알게 되어 기뻤다. 이번계기로 모던자바스크립트 책을 다시 한번 읽어보면서 자바스크립트를 더 깊이 공부해봐야겠다고 생각했다.
다양한 경험을 쌓아서 다음에는 대리님께 여쭤보지 않고도 내가 적절한 내장함수를 어떻게 쓸 수 있을지 아이디어를 낼 수 있도록 해야겠다.
