vue.js はどのようにして Web ページを定期的に更新しますか?

Web ページを定期的に更新する

vue.js メソッド: 1. 関数 [setTimeout(function(){}, milliseconds)] を実行します; 2. タイマーを実行する前に、インターフェイス データを取得する操作関数を実行します。 。

【おすすめ関連記事：vue.js】## Web ページを定期的に更新する

#vue.js メソッド:

js には 2 つのタイマーがあります

• setInterval(function(){}, ミリ秒)—関数は継続的に呼び出されます

• setTimeout(function(){}, ミリ秒)—関数は 1 回だけ実行します

一見すると、setInterval はビジネス ニーズを満たしているように見えますが、注意が必要な落とし穴がいくつかあります。setInterval を使用するだけでは、ページがフリーズしてしまいます。その理由は、JS エンジン スレッドに関連しています。平たく言えば、setInterval はタイマー キューをクリアしません。繰り返し実行されるたびにタイマーがオーバーラップし、最終的に Web ページがフリーズします。

ただし、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. 現在のページを終了した後、他のページでインターフェイスが呼び出され続けることを避けるために、終了する前にタイマーをクリアする必要があります。

クリア タイマーの最適化計画

上記のクリア タイマー ソリューションには 2 つの欠点があります:

• このタイマーをこのコンポーネント インスタンスに保存する必要があります。可能であれば、ライフサイクル フックのみがアクセスできるようにするのが最善です。これは深刻な問題ではありませんが、乱雑であると考えられる場合があります。

• 私たちのビルド コードはクリーンアップ コードから独立しているため、ビルドするすべてのものをプログラムでクリーンアップすることが困難になります

最適化ソリューション:

タイマーを定義した後、

$onceこのイベント リスナーの位置を通じてタイマーをクリアします。

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

関連する無料学習の推奨事項 :

javascript## ＃（ビデオ）＃＃＃＃＃＃

以上がvue.js はどのようにして Web ページを定期的に更新しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。