Comment vue.js actualise-t-il régulièrement la page Web ?

Méthode Vue.js pour actualiser régulièrement la page Web : 1. Exécuter la fonction [setTimeout(function(){}, milliseconds)] ; .

[Articles connexes recommandés : vue.js]

Comment vue.js actualise régulièrement la page Web :

js a deux minuteries

• setInterval(function(){}, milliseconds) - appellera la fonction en continu

• setTimeout(function(){}, milliseconds) - n'exécutera la fonction qu'une seule fois

À première vue, setInterval répondra à nos besoins professionnels. Cependant, nous devons faire attention à certains pièges. La simple utilisation de setInterval entraînera le gel de la page ! La raison est liée au thread du moteur JS. En termes simples, setInterval n'effacera pas la file d'attente du minuteur. Chaque exécution répétée entraînera un chevauchement du minuteur et finira par geler votre page Web.

Mais setTimeout est livré avec une minuterie claire, donc la bonne solution est la suivante :

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

Explication : 1. Exécutez une fonction d'opération pour obtenir les données de l'interface avant d'exécuter la minuterie, sinon l'interface Il prendra 1 minute avant d'appeler

2. Afin d'éviter de continuer à appeler l'interface sur d'autres pages après avoir quitté la page en cours, le minuteur doit être effacé avant de quitter

. Plan d'optimisation de la minuterie claire

La solution de minuterie claire ci-dessus présente deux inconvénients :

• Elle doit enregistrer cette minuterie dans cette instance de composant, si possible. Il est préférable que seuls les hooks Lifecycle puissent y accéder. Ce n’est pas un problème grave, mais cela peut être considéré comme du désordre.

• Notre code de build est indépendant de notre code de nettoyage, ce qui rend plus difficile pour nous de nettoyer par programme tout ce que nous construisons

Solution d'optimisation :

Effacez la minuterie via la position de $once cet écouteur d'événement une fois la minuterie définie

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

Recommandations d'apprentissage gratuites associées : javascript (Vidéo)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!