타이머기능

목차

 

코딩을 하다 보면 지연시간을 주고 싶을 때가 생긴다.

기능 간의 타이밍을 맞추기 위해서... 는 그냥 플래그 넣으면 되겠고,

아무래도 UX인 경우가 많겠다.

사용자가 몇초이상 꾸-욱 눌렀을 때,

어떤 주의사항을 몇 초 동안 보여준 뒤 버튼을 보여준다던가.

또한, 마우스를 콘텐츠 위에 올렸을 때 바로 함수를 실행시키기보다

1초 정도 유지하면 함수를 실행시키는 게 사용자의 의지를 더 반영할 수 있을 것이다.

setTimeout()

setTimeout은 지정시간 뒤, 해당 함수를 실행하는 함수이다.

setTimeout(() => {
  alert("2초!!"); // 실행 코드
}, 2000); // 설정시간

설정시간은 ms단위로써, 1s = 1000ms이다.

이렇게 간단한 코드는 한 줄로써,

여러 줄의 실행코드는

setTimeout(() => {
  timeFunc();
}, 2000);

function timeFunc(){
  alert("2초!!!");
}

이렇게 함수로 정리하는 것이 가독성을 높여준다.

 

setInterval()

setInterval은 setTimeout을 반복하는 함수이다.

대표적인 쓰임새로는, 시계에 자주 쓴다.

setInterval(() => {
  timeFunc();
}, 2000);

function timeFunc(){
  alert("2초!!!");
}

함수 구조는 setTimeout과 동일하다.

clearTimeout()

clearTimeout은 진행 중이던 타이머를 제거한다.

멈춘다 대신 제거한다로 표현한 이유는,

clearTimeout으로 제거한 타이머를 다시 실행시킬 시,

처음부터 타이머를 진행하기 때문이다.

 

즉, setTimeout를 쓸 때에도 도중에 타이머를 취소할 때

해당 함수를 쓰는 경우가 생긴다.

  let setIn = setInterval(() => {
    timeFunc();
  }, 2000);

  let count = 0;

  function timeFunc(){
    count++;
    if(count > 1)
      clearInterval(setIn);
    alert(count);
  }

효과를 명확히 보여주기 위해 setInterval, clearInterval를 썼는데

쓰다 보면 setInterval에 clearTimeout을 써도 같은 효과를 볼 수 있다는걸 알게 될 것이다.

 

하지만 이는 현재 같은효과를 나타낼 수 있을 뿐,

나중에 어떻게 될지 모르니

코드 유지성을 위해, 명시적으로도 각자 해당 함수를 쓰는 것이 좋다.

끝