Google chromeがバックグラウンド（非アクティブ）の時に止まってしまうのを解決したい

Question

やりたいこと

chromeをバックグラウンド（他のウィンドウを前面に出す）にしたときに動作が止まってしまう現象を解決したいです。

以前にもこの状態になったことはあり、私もその時に一度対応したのですがアップデートで設定が戻り、再度発生するようになってしまいました。

試したこと

https://game.aekana.com/others/6640/#2022%E5%B9%B43%E6%9C%88%E3%81%AE%E3%82%A2%E3%83%83%E3%83%97%E3%83%87%E3%83%BC%E3%83%88%EF%BC%88chrome99%EF%BC%89%E3%81%A7%E5%AF%BE%E5%BF%9C%E6%96%B9%E6%B3%95%E3%81%8C%E5%A4%89%E3%82%8F%E3%82%8A%E3%81%BE%E3%81%97%E3%81%9F

上記の記事を参照し、
プロパティのリンク先という項目に
「--disable-features=CalculateNativeWinOcclusion」を追加したのですが、解決しませんでした。

何か他に方法があれば、ご教授いただけると幸いです。

Comments

[5ugarVVatch1ng]

知りませんがPCを再起動してみたらどうでしょう。

[int32_t]

何が止まるのですか? setInterval() のコールバックとか?

[Kiiko1]

そうです。
setInterval() のコールバックです。

Answer 1

バックグラウンドタブかどうかに関わらず setTimeout() や setInterval() がとても不正確なのはそういう仕様なので、これらの正確さに依存した設計は避けるべきです。HTMLページ上では、「正確にある間隔でコードを実行する」というのはそもそも不可能だという前提を持つ必要があります。

たとえば、「200ms 毎に配列の現在のインデックスの要素を処理して、現在のインデックスに1を足す」のような処理は「処理開始からN ms 後のインデックスを計算する」という処理に変更しましょう。

BAD:

let array = [..];
// array[0] を処理
let arrayIndex = 1;
setInterval(() => {
  // array[arrayIndex] を処理
  arrayIndex++;
}, 200);

GOOD:

let array = [..];
const startTime = performance.now();
requestAnimationFrame(handleFrame);
function handleFrame(timeStamp) {
  const arrayIndex = Math.floor((timeStamp - startTime) / 200) % array.length;
  // array[arrayIndex] を処理
  requestAnimationFrame(handleFrame);
}

「200ms毎にある関数を呼ぶ」のような処理は「処理開始からN ms 経過後なら合計 N / 200 回呼ぶ」という処理に変更しましょう。

BAD:

setInterval(f, 200);

GOOD:

const startTime = performance.now();
let fCount = 0;
requestAnimationFrame(handleFrame);
function handleFrame(timeStamp) {
  const expectedCount = Math.floor((timeStamp - startTime) / 200);
  for (; fCount < expectedCount; ++fCount)
    f();
  requestAnimationFrame(handleFrame);
}

---

どうしても定期的に処理を行いたいこともあるとは思います。たとえば定期的にサーバにアクセスしないとサーバ側でタイムアウトしてしまうとか。そういう場合は Worker を使います。