Vue 지우기 타이머 setInterval 최적화 방안 공유
1965 단어 Vue타이머setInterval
시나리오 1
우선 데이터 함수에 타이머 이름을 정의합니다.
data() {
return {
timer: null //
}
},
this.timer = (() => {
//
}, 1000)
beforeDestroy() {
clearInterval(this.timer);
this.timer = null;
}이 구성 요소의 실례에 이timer를 저장해야 합니다. 가능하다면 생명주기 갈고리만 접근할 수 있는 것이 좋습니다.이것은 결코 심각한 문제가 아니지만, 그것은 잡동사니로 간주될 수 있다.
우리의 구축 코드는 우리의 정리 코드에 독립되어 있기 때문에 우리는 우리가 구축한 모든 것을 프로그램적으로 정리하기 어렵다.
시나리오 2
이 방법은 $once 이벤트 탐지기를 통해 타이머를 정의한 후의 위치를 제거하는 것입니다.
다음은 전체 코드입니다.
const timer = setInterval(() =>{
//
}, 500);
// $once ， beforeDestroy 。
this.$once('hook:beforeDestroy', () => {
clearInterval(timer);
})$on(eventName, eventHandler)을 통해 이벤트 수신
$once(eventName, eventHandler)를 통해 이벤트를 한 번에 정탐
$off(eventName, eventHandler)를 통해 이벤트 수신을 중지합니다.
부록 홈페이지 상세주소:프로그램 이벤트 탐지기
추가 지식: vue가 mounted에서 타이머 만들기 및 타이머 지우기
나는 쓸데없는 말을 더 이상 하지 않겠다. 모두들 코드를 직접 보는 것이 좋겠다.
mounted(){
var that=this;
var num = 1;
var ss='';
var a=setInterval(()=>{
a+=10;
if(this num===100){
ss='success';
console.log(ss)
clearInterval(a) // num 100
}
}, 1000);
}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue Render 함수로 DOM 노드 코드 인스턴스 만들기render에서createElement 함수를 사용하여 DOM 노드를 만드는 것은 직관적이지 않지만 일부 독립 구성 요소의 디자인에서 특수한 수요를 충족시킬 수 있습니다.간단한 렌더링 예는 다음과 같습니다. 또한 v...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
