VUE의 setTimeout 및 setInterval 자동 제거 사례

1810 단어 VUEsetTimeoutsetInterval없애다
Vue의 대형 단일 페이지 응용 프로그램에서 어떤 루트에서 실행 지연(set Timeout)이나 간격심(set Interval)이 필요한 함수가 자주 나타나지만 페이지destroy 전에 수동으로 정리해야 합니다.
일반 코드는 다음과 같습니다.

beforeDestroy() {
  this._timer && clearTimeout(this._timer);
}
하지만 자칫 잊어버리고 예상치 못한 상황을 초래할 수 있다면 어떻게 피할 수 있을까?
물론 있습니다. 그것은 set Timeout을 다시 쓰는 방법입니다. (아니면 아예 윈도우.set Timeout을 납치하는 것입니다.)

var _pageTimer = []; 
Vue.prototype.setTimeout = (fn, time) => {
  let handler = window.setTimeout(fn, time);
  _pageTimer.push(handler);
  
  return handler;
}
라우팅 차원에서 페이지가 변경될 때마다 정리 작업을 수행합니다.
router.beforeEach((to, from, next) => { _pageTimer.map(handler => { window.clearTimeout(handler); }) })
다시 페이지를 사용할 때 Vue의 set Timeout을 호출하면 훨씬 편리하지 않을까요?set Interval도 마찬가지입니다.
이 방법은 페이지의 비동기적인 요청에 대한 aax 처리에도 적용됩니다. aax의handler를 가져와서 절단면을 전환할 때handler를 호출할 수 있습니다.abort () 요청을 취소하여 서버 자원에 대한 불필요한 압력을 피하십시오.
추가 지식: vue에서 setTimeout을 사용하고 페이지를 종료한 후 타이머가 삭제되지 않았습니다
문제: 페이지가 setTimeout을 사용하여 시간을 순환하거나 두 페이지 사이의 시간 간격이 타이머보다 작을 때 타이머가 실행됩니다.
이유: 우리가 페이지를 새로 고칠 때, 현재 페이지가 이전에 만든 setTimeout과 다른 타이머를 모두 지우지만, 루트 전환만으로는 지우지 않습니다.

data (){
 return{
 clearTime: ''
 }
},
mounted () {
 randomGet () {
 //   1  2   
   var r = Math.random() * (2 - 1) + 1
   var t = Math.ceil(r * 60000)
   // console.log(t)
   this.clearTime = setTimeout(() => {
    this.submit()
    this.randomGet()
   }, t)
  },
  submit () {
   console.log('aaaa')
  }
},
destroyed () {
 clearTimeout(this.clearTime) //  
}
위의 VUE에서 set Timeout과 set Interval 자동 삭제 사례는 바로 편집자가 여러분에게 공유한 모든 내용입니다. 참고 부탁드리고 저희도 많이 사랑해 주세요.
[백준] 20499번 - Darius님 한타 안함?
SQL에서 같은 그룹의 최대/최소 레코드 읽어들이기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage