TIL. setInterval, clearInterval - 8/20

- setInterval, clearInterval

함수를 한번만 실행하지 않고 일정한 시간을 두고 실행 시키고 싶을 때가 있습니다.
그럴때 쓰는 것이 바로 setInterval() 메서드 입니다.

.clearInterval 함수를 사용하여 중지할 수 있습니다.
주의할 점은 일정한 시간 간격으로 실행되는 작업이 그 시간 간격보다 오래걸릴 경우 문제가 발생할 수 있습니다.

this.state = {
      num: 0,
      isMouseOn: false,
}

countNum = () => {
    let num = setInterval(() => {
      this.setState({
        num: this.state.num + 1,
      });
      if (!this.state.isMouseOn) {
        clearInterval(num);
      }
    }, 1000);
  };

이런식으로 코드를 쓰면 됩니다.

위의 코드는 조금 생략하긴 했지만 마우스를 특정 부분에 올리면 countNum함수가 실행됩니다.
그리고 마우스를 때면 state의 isMouseOn을 false로 바꾸고 clearInterval을 이용해
setInterval이 중단 되도록 만들었습니다.

이렇게 1초에 한번씩 올라갔다가 마우슬를 때면 중단됩니다.

여러 방면으로 많이 쓸수 있을 것 같습니다.

setInterval(function(){ alert("Hello"); }, 3000);

형식을 기억합시다.