vue.js는 어떻게 웹 페이지를 정기적으로 새로 고치나요?

Vue.js 메소드를 사용하여 웹 페이지를 정기적으로 새로 고칩니다. 1. [setTimeout(function(){}, milliseconds)] 함수를 실행합니다. 2. 타이머를 실행하기 전에 인터페이스 데이터를 가져오는 작업 함수를 실행합니다. ㅋㅋㅋ

setInterval(function(){}, milliseconds)——함수는 계속해서 호출됩니다

setTimeout(function(){}, milliseconds)——함수는 한 번만 실행됩니다얼핏 보면 setInterval 이는 우리의 비즈니스 요구 사항을 충족하지만 몇 가지 함정에도 주의해야 합니다. 단순히 setInterval을 사용하면 페이지가 정지될 수 있습니다. 그 이유는 JS 엔진 스레드와 관련이 있습니다. setInterval은 타이머 대기열을 지우지 않습니다. 각 반복 실행으로 인해 타이머가 겹쳐서 결국 웹 페이지가 정지됩니다.
하지만 setTimeout에는 클리어 타이머가 함께 제공되므로 올바른 해결 방법은 다음과 같습니다.

data(){
  return {
       timer:null, //定时器名称
    }
},
mounted(){
   this.queryInfo();
   this.timer = setInterval(() => {
       setTimeout(this.queryInfo, 0)
   }, 1000*60)
},
methods: {
   queryInfo(){
    //do something
   },
},
beforeDestroy(){
   clearInterval(this.timer);        
   this.timer = null;
}

지침: 1. 타이머를 실행하기 전에 작업 기능을 실행하여 인터페이스 데이터를 가져옵니다. 그렇지 않으면 1분 후에 인터페이스가 호출됩니다 2. 현재 페이지를 종료한 후 다른 페이지의 인터페이스를 계속 호출하지 않으려면 종료하기 전에 타이머를 지워야 합니다.

타이머 지우기 최적화 계획

위의 타이머 지우기 계획에는 두 가지 단점이 있습니다.
이 타이머를 이 구성 요소 인스턴스에 저장해야 합니다. 가능하면 라이프 사이클 후크만 액세스할 수 있는 것이 가장 좋습니다. 이는 심각한 문제는 아니지만 혼란스러운 것으로 간주될 수 있습니다.
우리의 빌드 코드는 정리 코드와 독립적이므로 우리가 만든 모든 것을 프로그래밍 방식으로 정리하기가 더 어렵습니다

최적화 솔루션:

이 이벤트 리스너를 사용하여 타이머 이후의 타이밍 위치를 정의하세요. 타이머를 삭제하세요.

const timer = setInterval(() =>{                    
    // 某些定时器操作                
}, 500);            
// 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
this.$once('hook:beforeDestroy', () => {            
    clearInterval(timer);                                    
})

관련 무료 학습 권장 사항:

javascript(동영상)

위 내용은 vue.js는 어떻게 웹 페이지를 정기적으로 새로 고치나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!