久しぶりに有益なスクリプトを見つけたので共有します。
問題となっていたのは結構複雑なスクリプトやアニメーションをCreateJSのHTML5でブラウザ上で動作させている時。タブを移動したり、他のアプリに移動して戻ってくるとフリーズする現象。
短時間ならフリーズしないのに長時間だとフリーズしていました。
createjs.Ticker.paused = trueとかでTickerを止めたりしてもだめ。
この問題についてChatGPTと解決方法を探していたのですが、結論としてはこれが原因かと思われます。
1.CreateJSの内部タイマーは「最後の tick の時間」を覚えてる
2.Ticker.paused = false で再開！
3.CreateJS：
「あれ？最後に動いたの何秒前？3分前！？……じゃあ**180秒分の処理まとめてやるわ！**💥」
4.結果：CPU100%超え／フリーズ確定
で、解決できたスクリプトは
CreateJS側がこちら
createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;
//遅れた時間分の tick をまとめて実行しないようになる
読み込むHTML側のJSはこちら
document.addEventListener("visibilitychange", () => {
if (document.hidden) {
console.log("🔕 タブ非表示：処理停止");
createjs.Ticker.paused = true;
} else {
console.log("🔔 タブ復帰：処理再開");
// 💥 ここがポイント！
// 再開する前に「時間を今にリセット」
createjs.Ticker._lastTime = createjs.Ticker._getTime();
// 少し遅らせてから再開（ブラウザが整ってから）
setTimeout(() => {
createjs.Ticker.paused = false;
}, 100); // 100msくらいが安全
}
});
ChatGPT曰く以下が原因だそうです。
✅ なぜ _lastTime が効くのか？
CreateJSの内部でこんな計算してる：
delta = currentTime - _lastTime;
→ _lastTime が放置中のままだと、delta が数分分のミリ秒になる
→ そのぶんの「tickイベント」を一気に発生させる → 死ぬ
→ _lastTime = 今の時間 にすれば delta = 0 に近くなる → 1フレームから再スタートできる！
chatGPTがなかったら１００年くらい悩むところでした。