자바스크립트(JavaScript)의 타이머함수 알아보기

타이머 함수

• setTimeout
• setInterval

함수를 실행하는데에 시간차가 필요하거나 일정 시간차로 반복하길 원할때 필요한 함수들 입니다.

setTimeout

setTimeout함수는 setTimeout(함수,지연시간,필요한argument)구조로 되어있는데요

setTimeout(function() {
	alert('알림');
},1000);

setTimeout(()=>{
	alert('알림');
},1000);

이런식으로 일반함수나 화살표 함수를 먼저 설정해주고 뒤에 지연시간을 넣어주는데 뒤에 1000은 1000ms(밀리세컨드)로 1초로
이 함수는1초뒤에 알림을 띄워주는 alert함수를 실행하는 코드입니다
이 뿐만아니라 원래 선언해둔 함수를 사용할 수도 있는데요

const alt = (name,age) =>{
    alert(name+'은'+ age+'살입니다');
  }
  
setTimeout(alt,1000,'홍길동','14');

결과

이런식으로 원래있던 함수를 등록할수도,argument가 필요하면 함수부분이아닌 뒤에 추가해주는 식으로 parameter를 전달해줄 수 있습니다.

또한 이 setTimeout함수를 취소하는 함수도 있는데요
clearTimeout은 setTimeout을 취소해주는 함수인데 이때 멈출 setTimeout의 식별자가 필요한데요

const alt = (name,age) =>{
    alert(name+'은'+ age+'살입니다');
  }
  
const timer=setTimeout(alt,1000,'홍길동','14');

clearTimeout(timer);

이런식으로 멈춰야할 타이머 함수의 이름이 필요합니다.

setinterval

setInterval은 특정 함수를 지연시간을 두고 반복하는 함수입니다

setInterval함수는 setInterval(함수,지연시간,필요한argument)구조로 되어있는데요 사실상 구조는 setTimeout이랑 똑같은데 얘는 그 시간으로 반복을 한다고 생각하시면 됩니다
그래서

  const alt = (name,age) =>{
    alert(name+'은'+ age+'살입니다');
  }

  const timer=setInterval(
    alt
  ,2000,'홍길동','14');

이런식으로 2초마다 알림창을 반복해서 띄워줍니다.

자 이setInterval은 멈추지않으면 무한으로 반복되기때문에 얘도 멈출수 있어야 겠죠??

clearInterval

clearInterval함수도 clearTimeout처럼 멈출 함수의 식별자만 있으면 멈출수있어요 clearInterval(Interval함수) 저는 리액트 컴포넌트에서 사용했습니다

function App() {
  

  const alt = (name,age) =>{
    alert(name+'은'+ age+'살입니다');
  }

  const timer=setInterval(
    alt
  ,2000,'홍길동','14');

  const stop=()=>{clearInterval(timer)};


  return (
   <>
  <button onClick={stop}>없음</button>
   </>
  );
}

export default App;

결과

저는 알림창이 세번정도 떴을때 쯤 멈추기를 누르니 멈췄습니다.