javascript_setInterval

setInterval

• 일정 시간마다 한번씩 동작
  별도로 멈출때까지 무한 동작

• 백그라운드에서 계속 동작

• 사용법

  • 화살표함수

    setInterval(() => {
    }, 시간);

  • 익명함수

    setInterval(function() => {
    }, 시간);

    시간 : 밀리초(1000이 1초)

• setInterval을 onclick메서드에 넣어놓고 버튼을 계속 누르면 setInterval이 덮어씌워지는 것이 아니라 별도로 계속 생긴다.
  이게 싫으면 멈춤코드를 위에 만들어놓으면 됨.

• 멈춤 : clearInterval(멈출 인터벌)
  setInterval을 변수에 넣고 멈출 인터벌에 해당 변수 넣으면 됨

  let interval = setInterval(() => {
      for(let i = 0; i<5; i++){
          console.log(i);
      }
  }, 1000);
  
  clearInterval(interval);

setTimeout

• 일정 시간동안 시다렸다가 딱 한번 동작하고 끝
  별도로 멈출수도 있고 내비둬도 한번만 동작하고 끝남.
  그래서 별도로 멈추는 일은 보통 없다.
  최초의 딜레이 같은 것
  • 화살표함수

    setTimeout(() => {
    }, 시간);

  • 익명함수

    setTimeout(function() => {
    }, 시간);

• 멈춤 : clearTimeout(멈출 타임아웃)

requestAnimationFrame

• requestAnimationFrame
  • setInterval과 비슷하지만
    setInterval은 백그라운드에서 카운트를 계속 세고
    requestAnimationFrame은 해당 브라우저를 보고 있지 않을 때는 멈춰있다. (백그라운드에서 동작하고 있지 않기 때문에 리소스를 적게 씀)
  • 1초에 60번 동작하는 것을 목표로 한다.
    컴퓨터 성능에 따라 동작하는 횟수가 조금씩 달라질 수 있어 컴퓨터마다 각각 결과값이 다르다.
  • 아직 웹표준이 정해지지 않은 상태.
  • 아직은 setInterval을 더 많이 쓴다. 왜냐하면 rfa는 초를 지정할 수 없기 때문이다.
  • 재귀함수. 아래와같이 자신이 들어있는 함수를 부른다. 괄호는 적지 말 것.

    function tmp(){
        console.log(index++);
        interval = window.requestAnimationFrame(tmp);
    }
    tmp();

• 멈춤 : cancelAnimationFrame(rfa이름)

  setTimeout(function(){
      cancelAnimationFrame(interval)
  }, 1000);

여러번 눌렀을 때

• setInteval이나 requestAnimationFrame을 여러번 누르게 되면 전에 눌렀던 것이 없어지는 것이 아니라 누른대로 계속 적용이 된다. 그래서 누르기 전에 clear, cancel하는 코드를 넣는 것이 좋다.