[VueJS] setInterval 사용해보기

처음 화면이고 저 시작 버튼을 누르면 인터벌을 생성해서 일정 시간마다 데이터를 불러오는 함수를 실행시켜볼 생각이다.

 

시작 버튼을 눌렀을 때

 

먼저 data() 안에 사용할걸 추가

그리고 <template> 안에 버튼 추가

<v-btn small color="red darken-3" @click="stop_auto_reload" v-if="auto_reload === true">
  <v-icon small>mdi-pause</v-icon> 정지
</v-btn>
<v-btn small color="blue darken-3" @click="start_auto_reload" v-else>
  <v-icon small>mdi-play</v-icon> 시작
</v-btn>

(VuetifyJS를 사용한 버튼입니다.)

 

auto_reload의 값에 따라 보이는 버튼을 다르게 만들었다.

 

methods 쪽에 이제 함수를 추가

start_auto_reload() {
  console.log('start!!');
  this.auto_reload = true;
  this.auto_reload_func = setInterval(() => {
    this.getData(true);
  }, this.auto_reload_delay)
},
stop_auto_reload() {
  console.log('stop!!'); 
  this.auto_reload = false;
  clearInterval(this.auto_reload_func);
},

시작을 누르면 this.auto_reload_func 안에 setInterval을 만들어주고, 정지를 누르면 this.auto_reload_func를 clearInterval 시켜주면 끝

 

그리고 인터벌을 만들고 다른 페이지로 이동해도 계속 돌기 때문에 그럴 의도가 있는 게 아니라면 destroyed()에서도 clearInterval을 해줘야 한다.