Vue를 사용하여 초 단위로 카운트 업

Question

작은 타이머 Vue 구성 요소를 생성 중입니다. 사용자는 타이머를 시작하고 중지 할 수 있어야합니다.

<template> 
    <div> 
     <a class="u-link-white" href="#" @click="toggleTimer"> 
      {{ time }} 
     </a> 
    </div> 
</template> 

<script> 
    export default { 
     props: ['order'], 
     data() { 
      return { 
       time: this.order.time_to_complete, 
       isRunning: false, 
      } 
     }, 
     methods: { 
      toggleTimer() { 
       var interval = setInterval(this.incrementTime, 1000); 
       if (this.isRunning) { 
        //debugger 
        clearInterval(interval); 
        console.log('timer stops'); 
       } else { 
        console.log('timer starts'); 
       } 
       this.isRunning = (this.isRunning ? false : true); 
      }, 
      incrementTime() { 
       this.time = parseInt(this.time) + 1; 
      }, 
     } 
    } 
</script> 

내가 타이머가 실행 여부를 결정하기 위해 isRunning 변수를 전환하고 있습니다 : 여기에 지금까지 내 구성 요소입니다. 첫 번째 클릭 (재생)에서 타이머가 시작되고 성공적으로 증가합니다.

그러나 두 번째 클릭 (일시 중지)에서 isRunning var는 다시 전환되지만 clearInterval(this.incrementTime)은 타이머를 일시 중지하고 타이머를 일시 중지하지 않습니다. 해당 디버거를 삽입하고 콘솔을 통해 수동으로 clearInterval(interval)을 누르면 정의되지 않은 값을 반환합니다.

내 구성 요소의 형식을 잘못 지정 한 사람에 대한 통찰력이 있습니까?

Answer 1

위의 설명에서 언급 한 개념을 다루는 작동 예제가 있습니다. 이는 구성 요소의 정확한 구현이 아니라 어떻게 작동하는지 보여주는 예제입니다.

console.clear() 
 
new Vue({ 
 
    el: "div", 
 
    data() { 
 
    return { 
 
     time: 0, 
 
     isRunning: false, 
 
     interval: null 
 
    } 
 
    }, 
 
    methods: { 
 
    toggleTimer() { 
 
     if (this.isRunning) { 
 
     clearInterval(this.interval); 
 
     console.log('timer stops'); 
 
     } else { 
 
     this.interval = setInterval(this.incrementTime, 1000); 
 
     } 
 
     this.isRunning = !this.isRunning 
 
    }, 
 
    incrementTime() { 
 
     this.time = parseInt(this.time) + 1; 
 
    }, 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script> 
 
<div> 
 
    <a class="u-link-white" href="#" @click="toggleTimer"> 
 
    {{ time }} 
 
    </a> 
 
</div>

Answer 2

<template> 
    <div> 
     <a class="u-link-white" href="#" @click="toggleTimer"> 
      {{ time }} 
     </a> 
    </div> 
</template> 

<script> 
    export default { 
     props: ['order'], 
     data() { 
      return { 
       time: this.order.time_to_complete, 
       isRunning: false, 
       interval: undefined // store the interval here 
      } 
     }, 
     methods: { 
      toggleTimer() { 

       if (this.isRunning) { 
        clearInterval(this.interval); 
        console.log('timer stops'); 
       } else { 
        this.interval = setInterval(this.incrementTime, 1000); 
        console.log('timer starts'); 
       } 
       this.isRunning = !this.isRunning; // better to read 
      }, 
      incrementTime() { 
       this.time = parseInt(this.time) + 1; 
      }, 
     } 
    } 
</script> 

추가 테스트없이 첫 번째 간격은 절대 멈추지 않습니다. 포인터가 함수 범위에 있기 때문입니다. 그 이유는 내가 methoded가 두 번째 호출되면 사용할 수 있기 때문에 내가 데이터 객체에 간격을 제거한 이유입니다. 도움이되기를 바랍니다.