자바스크립트 setInterval, clearInterval 사용하기

setInterval 함수를 사용해보겠습니당

해당 문서를 참고하여 작성하였습니다
https://developer.mozilla.org/ko/docs/Web/API/Window/setInterval

setInterval, clearInterval 함수
setInterval는 특정 시간 간격으로 함수를 호출할 수 있는 함수입니다.

1) 구문

자바스크립트 구문을 보면 다음과 같습니다.

<script>
	setInterval(func)
	setInterval(func, delay)
	setInterval(func, delay, arg0, arg1, /* … ,*/ argN)
</script>

• fun : 반복적으로 실행할 함수
• delay: 반복할 시간 간격. ms초 단위. 지정하지 않으면 0. 예를 들어 [delay]초 마다 fun 함수를 실행.
• arg0 ~ argN: 함수 fun에 전달되는 인수

2) 반환값과 clearInterval 함수

setInterval의 반환값은 타이머를 식별하는 0이 아닌 숫자 값입니다. 저는 쉽게 해당 serInterval을 가르키는 고유 ID 라고 이해했습니다.
이 반환값으로 setInterval을 종료할 수 있습니다.
저는 vue2에서 setInterval을 사용하여 2초마다 현재 시간을 보여주고, 종료 버튼을 클릭하면 interval을 종료하도록 예제를 만들었습니다.

<template>
  <div>
    <button @click="intervalClose">종료</button>
    <div v-for="time in timeList" :key="time">{{ time }}</div>
  </div>
</template>
<script>
import { getFullDateToString } from '@/utils/dateFormat';

export default {
  name: 'SetInterval',
  data() {
    return {
      timer: '',
      timeList: []
    };
  },
  mounted() {
    this.timer = setInterval(() => {
      this.timeList.push(getFullDateToString(new Date()));
    }, 2000);
  },
  methods: {
    intervalClose() {
      clearInterval(this.timer);
      this.timeList.push('interval 종료');
    }
  }
};
</script>