Wie aktualisiert vue.js die Webseite regelmäßig?

Vue.js-Methode zum regelmäßigen Aktualisieren der Webseite: 1. Führen Sie die Funktion [setTimeout(function(){}, Millisekunden)] aus. 2. Führen Sie eine Operationsfunktion aus, um die Schnittstellendaten abzurufen, bevor Sie den Timer ausführen.

【Empfohlene verwandte Artikel: vue.js】

vue.js So aktualisieren Sie Webseiten regelmäßig:

js hat zwei rs

• setInterval(function(){}, Millisekunden) – Die Funktion wird kontinuierlich aufgerufen

• setTimeout(function(){}, Millisekunden) – Die Funktion wird nur einmal ausgeführt

Auf den ersten Blick setInterval Es wird unseren Geschäftsanforderungen gerecht, aber wir müssen auch auf einige Fallstricke achten. Die einfache Verwendung von setInterval führt zum Einfrieren der Seite! Der Grund hängt mit dem JS-Engine-Thread zusammen: setInterval löscht die Timer-Warteschlange nicht. Jede wiederholte Ausführung führt dazu, dass sich der Timer überschneidet und Ihre Webseite schließlich einfriert.

Aber setTimeout verfügt über einen klaren Timer, daher lautet die richtige Lösung wie folgt:

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

Anweisungen: 1. Führen Sie die Operationsfunktion aus, um die Schnittstellendaten zu erhalten, bevor Sie den Timer ausführen, andernfalls wird die Schnittstelle nach 1 Minute aufgerufen

2. Um zu vermeiden, dass nach dem Verlassen der aktuellen Seite weiterhin Schnittstellen auf anderen Seiten aufgerufen werden, muss der Timer vor dem Beenden gelöscht werden

Dieser Timer muss in dieser Komponenteninstanz gespeichert werden. Wenn möglich, ist es am besten, dass nur Lebenszyklus-Hooks darauf zugreifen können. Dies ist kein ernstes Problem, kann aber als Unordnung angesehen werden.

Unser Build-Code ist unabhängig von unserem Bereinigungscode, was es für uns schwieriger macht, alles, was wir erstellen, programmgesteuert zu bereinigen.

• Optimierungslösung:
  Verwenden Sie
diesen Ereignis-Listener, um die Timing-Position nach dem Timer zu definieren um den Timer zu löschen.

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

  Verwandte kostenlose Lernempfehlungen: Javascript(Video)

  Das obige ist der detaillierte Inhalt vonWie aktualisiert vue.js die Webseite regelmäßig?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!