setInterval 함수

setInterval(callback, delay[, arg1, arg2, ...]);

JavaScript에서 주어진 시간 간격마다 지정된 함수를 반복적으로 실행하는 타이머 메소드

일정한 시간 간격으로 작업이 반복되어야 할 때 유용하게 사용

 

callback : 지정된 시간 간격마다 호출될 함수로, 일종의 콜백 함수. 즉, 이 함수가 반복적으로 실행

delay : 콜백 함수를 실행하기 전에 기다릴 시간 간격

arg1, arg2, ... : 선택적 매개변수로, 콜백 함수에 전달될 인수

 

setInterval()로 시작한 반복 작업은 clearInterval() 함수를 사용하여 중지할 수 있다.

 

<template>
  <input v-model="inputText" @input="handleInput" />
  {{ inputText }}
  <div>
    <span>timer</span>
    <p v-if="timer > 0">카운트 다운: {{ timer }}</p>
    <p v-else>타이머 종료</p>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  data() {
    return {
      inputText: "",
      timer: 60,
      interval: null,
    };
  },
  methods: {
    handleInput() {
      // 키 입력 시마다 기존 타이머를 중지하고 새로운 타이머를 시작합니다.
      if (this.interval) {
        return;
      }

      // 타이머가 종료될 때까지 1초마다 countdown 값을 감소시킵니다.
      this.interval = setInterval(() => {
        if (this.timer > 0) {
          this.timer--;
        } else {
          clearInterval(this.interval);
        }
      }, 1000);
    },
  },
};
</script>