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中。单击示例之外的任何位置，即可看到它停止了，然后再返回以继续操作，而不会试图赶上。

希望这会有所帮助！

标签重新获得焦点后SetInterval赶上来

1 个答案: