標簽重新獲得焦點后SetInterval趕上來

Question

我有一個setinterval函數，用於更改Vue數據中的變量。

當選項卡失去焦點然后重新找回時，SetInterval會嘗試追趕並發瘋。

我看到放慢速度或完全停止它以節省資源或電池的背后邏輯，但是追趕是我認為沒有用的東西。 在什么情況下程序員希望函數每5秒運行一次，但是如果它每0.3秒運行10次也可以。

無論如何，是否有更好的解決方案或應該添加的內容？

created() {
    setInterval(() => this.moveSlider(), 7000);
},

Answer 1

您可以使用諸如document.hasFocus()之類的選項來檢查選項卡是否處於活動狀態：

 new Vue({ el: '#app', template: '#base', data () { return { count: 0 } }, created () { setInterval(() => { this.incrCount(); }, 2000); }, methods: { incrCount() { if (document.hasFocus()) this.count++; else console.log("Not in focus"); } } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <template id="base" v-cloak> <div> <h3>Click here to see the count go up</h3> <div>{{count}}</div> </div> </template> <div id="app"></div> 

注意：使用上面的代碼段，您必須在結果內單擊以使示例聚焦，因為該示例位於iframe中。 單擊示例之外的任何位置以查看其停止，然后返回以繼續操作，而不會試圖趕上。

希望這可以幫助！