标签重新获得焦点后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中。 单击示例之外的任何位置以查看其停止，然后返回以继续操作，而不会试图赶上。

希望这可以帮助！