반응형
리셋 세트개체로부터의 간격()
저는 VueJs를 가지고 놀고 있고, 간단한 카운터를 만들었습니다.리셋하고 싶다setInterval()로부터의 메서드resetTimer()기능.하지만, 그것은 효과가 없습니다.내가 뭘 놓쳤는지 모르겠어
new Vue({
el: '#app',
data: {
hours: 0,
minutes: 0,
seconds: 0,
counter: 0
},
methods: {
timer() {
setInterval(() => {
this.seconds = this.timerFormat(++this.counter % 60)
this.minutes = this.timerFormat(parseInt(this.counter / 60, 10) % 60)
this.hours = this.timerFormat(parseInt(this.counter / 3600, 10))
}, 1000);
},
resetTimer() {
clearInterval(this.timer())
},
timerFormat(timer) {
return timer > 9 ? timer : '0' + timer;
}
}
})<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lean Vue</title>
</head>
<body>
<div id="app">
<p>{{ hours }} : {{ minutes }} : {{ seconds }}</p>
<button @click="timer">Start</button>
<button @click="resetTimer">Pause</button>
</div>
<script src="dist/bundle.js"></script>
</body>
</html>인터벌 타이머의 글로벌 변수를 정의합니다( ).my_timer이 예에서는) 리셋액션으로 클리어 할 수 있습니다.
new Vue({
el: '#app',
data: {
hours: 0,
minutes: 0,
seconds: 0,
counter: 0,
my_timer :0
},
methods: {
timer() {
this.my_timer = setInterval(() => {
this.seconds = this.timerFormat(++this.counter % 60)
this.minutes = this.timerFormat(parseInt(this.counter / 60, 10) % 60)
this.hours = this.timerFormat(parseInt(this.counter / 3600, 10))
}, 1000);
},
pauseTimer() {
clearInterval(this.my_timer)
},
timerFormat(timer) {
return timer > 9 ? timer : '0' + timer;
}
}
})
이게 도움이 됐으면 좋겠다.
new Vue({
el: '#app',
data: {
hours: 0,
minutes: 0,
seconds: 0,
counter: 0,
my_timer:0
},
methods: {
timer() {
this.my_timer = setInterval(() => {
this.seconds = this.timerFormat(++this.counter % 60)
this.minutes = this.timerFormat(parseInt(this.counter / 60, 10) % 60)
this.hours = this.timerFormat(parseInt(this.counter / 3600, 10))
}, 1000);
},
resetTimer() {
clearInterval(this.my_timer)
this.hour=0
this.minutes=0
this.seconds=0
this.counter=0
},
timerFormat(timer) {
return timer > 9 ? timer : '0' + timer;
}
}
})<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lean Vue</title>
</head>
<body>
<div id="app">
<p>{{ hours }} : {{ minutes }} : {{ seconds }}</p>
<button @click="timer">Start</button>
<button @click="resetTimer">Reset</button>
</div>
<script src="dist/bundle.js"></script>
</body>
</html>왜냐면this.timer()돌아온다undefined.
이거 드셔보세요
timer() {
this.interval = setInterval(() => {
this.seconds = this.timerFormat(++this.counter % 60)
this.minutes = this.timerFormat(parseInt(this.counter / 60, 10) % 60)
this.hours = this.timerFormat(parseInt(this.counter / 3600, 10))
}, 1000);
}
그리고.
pauseTimer() {
clearInterval(this.interval)
}
측정하는 시간을 재설정하려면 값을 직접 설정하십시오.
this.hours = 0;
this.minutes = 0;
this.seconds = 0;
this.counter = 0;
클리어 할 필요 없어이 경우 간격입니다.
메모: setInterval 및 clear간격은 개인적으로 정의된 변수 "카운터"와 관련이 없으므로 사용자가 처리해야 합니다.
타이머를 일시 정지하는 경우:
clearInterval(this.timer())
그러면 timer() 메서드가 다시 호출됩니다.
반환된 값을 저장한 후 다음과 같이 간격을 지우는 데 사용하려고 했던 것 같습니다.
timer() {
this.intervalTimer = setInterval(() => {
this.seconds = this.timerFormat(++this.counter % 60)
this.minutes = this.timerFormat(parseInt(this.counter / 60, 10) % 60)
this.hours = this.timerFormat(parseInt(this.counter / 3600, 10))
}, 1000);
},
pauseTimer() {
clearInterval(this.intervalTimer)
},
언급URL : https://stackoverflow.com/questions/41259457/reset-setinterval-from-object
반응형
'programing' 카테고리의 다른 글
| 클릭하우스, 고속 가입을 위한 엔진 (0) | 2022.11.08 |
|---|---|
| try/except를 사용하지 않고 문자열이 int를 나타내는지 확인하려면 어떻게 해야 합니까? (0) | 2022.11.08 |
| 투고 요청의 크기 제한은 얼마입니까? (0) | 2022.11.08 |
| JavaScript를 사용하여 새 페이지를 로드하지 않고 브라우저에서 URL 변경 (0) | 2022.11.08 |
| WHERE 절을 사용하여 쿼리에 배열 전달 (0) | 2022.11.08 |