主页 / 问题 / 1602187
Accepted
eccs0103
Asked:2024-12-11 15:27:21 +0800 CST2024-12-11 15:27:21 +0800 CST

计时器与焦点同步运行

  • 772

描述

我创建了一个带有静态 FPS 的简单“引擎”。

class StaticEngine extends EventTarget {
    constructor() {
        super();

        let previous = 0;
        /**
         * @param {DOMHighResTimeStamp} current 
         * @returns {void}
         */
        const callback = (current) => {
            const difference = current - previous;
            for (let index = 0; index < difference / this.#gap; index++) {
                if (this.#focus && this.launched) this.dispatchEvent(new Event(`update`));
                previous = current;
            }
            requestAnimationFrame(callback);
        };
        requestAnimationFrame(callback);

        window.addEventListener(`focus`, (event) => this.#focus = true);
        window.addEventListener(`blur`, (event) => this.#focus = false);
    }
    /** @type {boolean} */
    launched = false;
    /** @type {number} */
    #gap = 1000 / 120;
    /** @type {boolean} */
    #focus = document.hasFocus();
}

它有一个大问题：如果选项卡的焦点丢失，则dispatchEvent不会发生调用，但计数器requestAnimationFrame会累积，当焦点返回时，引擎将不得不一次处理数千个周期。即使我创建了检查焦点的逻辑这一事实也不能确保 100% 的可靠性，因为，例如，在 Edge 中，当处理程序不起作用时打开时，或者当我们使用+在选项卡之间切换时
，会出现错误。 另外，我希望能够在 Workers 中使用该引擎，但它们在那里不可用。当然，我可以通过 发送焦点状态，但这会违反类的完整性，并且是一个拐杖而不是解决方案。Inspect elementblurAltTab
documentwindowmessage

问题

基本问题：当选项卡未聚焦时如何停止计时器？
如果主要问题无法解决：我应该如何替换焦点逻辑，使其至少在 Workers 中正常工作？

javascript

1 个回答

  1. Best Answer

    一切问题的解决办法就是setTimeout

    通过替换requestAnimationFrame为，setTimeout我们将消除对 focus 的依赖和对 的依赖document。引擎将自动优化以在后台运行。它在 Workers 中也可以毫无问题地工作。

    class StaticEngine extends EventTarget {
    constructor() {
        super();

        let previous = 0;
        /**
         * @returns {void}
         */
        const callback = () => {
            const current = performance.now();
            const difference = current - previous;
            for (let index = 0; index < difference / this.#gap; index++) {
                if (this.launched) this.dispatchEvent(new Event(`update`));
                previous = current;
            }
            setTimeout(callback);
        };
        setTimeout(callback);
    }
    /** @type {boolean} */
    launched = false;
    /** @type {number} */
    #gap = 1000 / 120;
}
    • 0

相关问题