라이프사이클 0이 되면 타이머 삭제 질문

[이용혁]

안녕하세요.

 

<p v-if="showSaleCount == true">할인까지 남은 시간 : {{saleCount}}초</p>

 data(){
    return {
      showSaleCount : true,
      saleCount : 30,
    }
  },
  mounted(){
    setInterval(()=>{
      this.saleCount--;
    }, 1000);
    setTimeout(()=>{
      this.showSaleCount = false;
    }, 30000);
  },

 

위와같이 30초 카운트 후 0초가 되면 타이머가 false값으로 변경되면서 삭제되게끔 했습니다.

구현은 가능했지만 좀 더 나은 방법이 있었는지 궁금해 질문을 남깁니다.

[codingapple]

그냥 UI만 안보이게 처리해도 괜찮은 방법인데

타이머 삭제해버리는 방법이 확실하고 안심되는 방법입니다

clearInterval() 안에 setinterval타이머를 집어넣으면 타이머 삭제도 가능합니다 

 

[이용혁]

mounted(){
    setTimeout(()=>{
      this.showDiscount = false;
    }, 2000);
    clearInterval(setInterval(()=>{
      this.saleCount--;
    }, 1000));
  },

 

말씀하시는게 이게 맞나요?

위의 코드로 변경하니 setInterval도 동작하지 않습니다.

[codingapple]

var a = setInterval()을 변수에 담아서 쓰시고 

그걸 타이머 제거하고 싶을 때 clearInterval(a)안에 집어넣으면 됩니다 

[이용혁]

감사합니다. 해결했습니다^^

[황철원]

export default {
name: "Discount",
data() {
return {
discountNum: 30,
};
},
mounted() {
this.a = setInterval(() => {
this.discountNum--;
}, 200);
if (this.discountNum == 0) {
clearInterval(this.a);
}
},
};

안녕하세요 강사님, 값이 0 되면 멈추고싶은데 잘 작동하지 않아 여쭙고 싶어서 글을 작성하게 되었습니다:)

[codingapple]

a라는 데이터가 없는것 같은데 하나 만들어봅시다 

[이호철]

우선 setInterval을 변수에 담아서 나중에 clearInterval에서 재사용하려는 거 같아서
methods에 등록해놓았고,
마운트 될때 setInterval을 실행시키고,

업데이트 될때 0초가 되면 clearInterval을 실행시키도록 작성해보았는데,
어쩐 일인지 카운트가 계속 되네요. 문제가 뭘까요?

`js
export default {
name: "Discount",
data(){
return {
countDown : 5,
}
},
methods : {
countFunc(){
setInterval(()=>{
this.countDown = this.countDown - 1;
},1000)
}
},
mounted() {
if(this.countDown !== 0){
this.countFunc();
}
},
updated(){
if(this.countDown === 0){
clearInterval(this.countFunc)
}
}
}`

[codingapple]

setInterval을 변수에 저장해놓고 그걸 clearInterval에 넣어야합니다

[글쓴이]

글