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。点击例子以外的任何地方看到它停下来，然后返回到恢复动作没有它试图赶上。

希望这可以帮助！