How does vue.js refresh the web page regularly?

vue.js method to refresh the web page regularly: 1. Execute the function [setTimeout(function(){}, milliseconds)]; 2. Execute an operation function to obtain the interface data before executing the timer.

【Recommended related articles: vue.js】

vue.js method to refresh web pages regularly:

js has two timers

• setInterval(function(){}, milliseconds)——The function will be called continuously

• setTimeout(function(){}, milliseconds)——Only execute Function once

At first glance, setInterval will meet our business needs. However, we need to pay attention to some pitfalls. Simply using setInterval will cause the page to freeze! The reason is related to the JS engine thread. In layman's terms, setInterval will not clear the timer queue. Each repeated execution will cause the timer to overlap and eventually freeze your web page.

But setTimeout comes with a clear timer, so the correct solution is as follows:

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;
}

Instructions: 1. Execute an operation function to obtain interface data before executing the timer, otherwise the interface It will be called after 1 minute

2. In order to avoid continuing to call the interface on other pages after exiting the current page, the timer needs to be cleared before exiting.

Clear timer optimization plan

The above clear timer solution has two disadvantages:

• It needs to save this timer in this component instance. If possible, it is best to only Lifecycle hooks can access it. This is not a serious problem, but it can be considered clutter.

• Our build code is independent of our cleanup code, which makes it harder for us to programmatically clean up everything we build

Optimization Solution:

Clear the timer through the position of $oncethis event listener after defining the timer.

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

Related free learning recommendations ：javascript（Video）

The above is the detailed content of How does vue.js refresh the web page regularly?. For more information, please follow other related articles on the PHP Chinese website!