Vue2에서 clearTimeout & clearInterval 하는법

Vue2에서 clearTimeout & clearInterval 하는법

Vue를 이용해서 프로젝트를 만들다보면 'setTimeout'나 'setInterval' 함수를 사용하는 경우가 꽤 자주 생깁니다.

 

• setTimeout은 일정 시간이 지나면 인자로 전달된 callback 함수를 실행하는 함수로 중간에 취소하고 싶으면 clearTimeout을 해줘야 합니다다.
• setInterval은 일정 시간을 텀으로 두고 주기적으로 인자로 전달된 callback 함수를 실행하는 함수인데, 원하는 만큼 실행이 되면 조건을 통해 clearInterval을 해줘야 합니다.

이 두 함수는 사용보다 해제를 잘 하는 것이 더 중요한데요. 해제를 할 땐 각각 'clearTimeout'과 'clearInterval' 함수를 사용하면 됩니다.

그런데 해제 방법을 검색 해보면 js 코드 예제는 많지만 Vue를 사용하는 예제는 많지 않더라구요. 그래서 오늘은 vue로 두 함수를 해제하는 방법을 공유해보겠습니다.

 

먼저 clearTimeout과 clearInterval의 작동 원리를 먼저 알아보고, 각각 JS와 Vue에서 어떻게 구현하는지 알아보겠습니다.

 

---

 

clearTimeout()

원리

setTimeout은 생성한 타이머를 식별할 때 사용하는 timeoutID라는 양의 정수값을 반환합니다. 이 값을 clearTimeout의 인자로 넣어주면 setTimeout이 해제되는 원리입니다.

 

JavaScript

아래의 예제는 JS에서 clearTimeout을 하는 방법입니다.

setTimeout가 반환한 timeoutID를 'timer'라는 변수에 담은 후, clearTimeout의 인자로 해당 변수를 넘겨줍니다.

결과창을 확인해보면 가만히 둘 땐 3초뒤에 'hello' 문구가 'world'로 바뀌지만, 'stop 버튼'을 누르면 clearTimeout이 실행되어 문구가 바뀌지 않습니다.

 

 

Vue

Vue 에서도 원리는 똑같은데 형태만 살짝 달라요. 'this' 키워드가 핵심입니다.

'mounted 훅'에서 setTimeout을 실행하고, setTimeout이 반환하는 timeoutID를 'this' 키워드를 통해 'data' 인스턴스에 저장합니다. 해제할 때는 다시 'this'를 이용해서 clearTimeout의 파라미터로 저장해 놓은 timeoutID를 전달하면 됩니다.

 

 

---

 

clearInterval()

원리

clearInterval도 clearTimeout과 똑같은 원리로 동작합니다. setInterval이 반환하는 intervalID를 clearInterval에 인자로 전달하면 되죠.

 

JavaScript

count가 1초마다 올라가는데 stop버튼을 누르거나 100에 도달하면 멈추는 코드입니다.

 

 

Vue

위와 같은 내용을 Vue로 구현한 코드입니다.

 

 

 

 

다 읽고도 이해가 되지 않는다면 댓글을 남겨주시면 최대한 답변해드릴게요^^

 

* 오류 지적은 언제나 환영입니다 :)