SetInterval догоняет после того, как вкладка восстанавливает фокус

Question

У меня есть функция setinterval, которая изменяет переменную в данных Vue.

Когда вкладка теряет фокус, а затем восстанавливает ее обратно, SetInterval пытается наверстать упущенное и сходит с ума.

Я вижулогика замедления или полной остановки, чтобы сохранить ресурсы или батарею, но наверстать упущенное я не вижу смысла.В каком случае программист хотел бы, чтобы функция запускалась каждые 5 секунд, но было бы хорошо, если бы она выполнялась также 10 раз каждые 0,3 секунды ...

В любом случае, есть ли лучшее решение или что-то, что яследует добавить?

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>

Примечание: с фрагментом выше, вы должны щелкнуть внутри результата, чтобы перейти к примерусосредоточиться, потому что это в фрейме.Щелкните в любом месте за пределами примера, чтобы увидеть его остановку, затем вернитесь, чтобы возобновить действие, не пытаясь наверстать упущенное.

Надеюсь, это поможет!