[Bug] 切换浏览器tab后不会继续输出

[gaye746560359]

💻 Operating System

Windows

📦 Environment

Other

🌐 Browser

Chrome

🐛 Bug Description

切换浏览器tab后不会继续输出

🚦 Expected Behavior

No response

📷 Recurrence Steps

No response

📝 Additional Information

No response

[lobehubbot]

👀 @gaye746560359

Thank you for raising an issue. We will investigate into the matter and get back to you as soon as possible.
Please make sure you have given us as much context as possible.
非常感谢您提交 issue。我们会尽快调查此事，并尽快回复您。 请确保您已经提供了尽可能多的背景信息。

[arvinxx]

是最新版本吗？

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

Is it the latest version?

[gaye746560359]

是最新版本吗？

是最新版本

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

Is it the latest version?

is the latest version

[arvinxx]

@gaye746560359 麻烦录个屏看下。我这边复现不出来

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

@gaye746560359 Please record the screen and take a look. I can't reproduce it here

[sxjeru]

部分浏览器的 setTimeout 会在后台休眠，这边 chrome 124 可以复现。
如图，16ms 的延迟在后台状态时会被延长至 1s 。

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

The setTimeout of some browsers will sleep in the background, which can be reproduced in chrome 124.
As shown in the figure, the 16ms delay will be delayed to 1s in the background state.

[arvinxx]

但就算延迟理论上应该也不会停止输出的呀？

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

But theoretically, even if there is a delay, the output will not stop?

[sxjeru]

这位的意思应该就是切到后台时不会输出吧，切回来肯定是好的，会继续输出。

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

What this probably means is that there will be no output when switching to the background. It must be good to switch back.

[gaye746560359]

这位的意思应该就是切到后台时不会输出吧，切回来肯定是好的，会继续输出。

是的，是你说的这个意思。

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

This should mean that there will be no output when switching to the background. It must be good to switch back and the output will continue.

Yes, that's what you meant.

[arvinxx]

部分浏览器的 setTimeout 会在后台休眠，这边 chrome 124 可以复现。
如图，16ms 的延迟在后台状态时会被延长至 1s 。

那感觉是不是使用 requestAnimationFrame 能解决？

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

The setTimeout of some browsers will sleep in the background, which can be reproduced in chrome 124.
As shown in the figure, the 16ms delay will be extended to 1s in the background state.

Is it possible to use requestAnimationFrame?

[sxjeru]

那感觉是不是使用 requestAnimationFrame 能解决？

按下面的代码测试，requestAnimationFrame 后台还是会休眠。

var t = performance.now();

function fun1() {
  const _t = performance.now();
  console.log(_t - t);
  t = _t;

  // 使用 requestAnimationFrame 模拟 setTimeout
  requestAnimationFrame(() => {
    setTimeoutRAF(fun1, 100); 
  });
}

function setTimeoutRAF(callback, delay) {
  let startTime = performance.now();
  function loop(currentTime) {
    if (currentTime - startTime >= delay) {
      callback();
      return;
    }
    requestAnimationFrame(loop);
  }
  requestAnimationFrame(loop);
}

fun1();

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

Is it possible to use requestAnimationFrame?

Test according to the following code, requestAnimationFrame will still sleep in the background.

var t = performance.now();

function fun1() {
  const _t = performance.now();
  console.log(_t - t);
  t = _t;

  // Use requestAnimationFrame to simulate setTimeout
  requestAnimationFrame(() => {
    setTimeoutRAF(fun1, 100);
  });
}

function setTimeoutRAF(callback, delay) {
  let startTime = performance.now();
  function loop(currentTime) {
    if (currentTime - startTime >= delay) {
      callback();
      return;
    }
    requestAnimationFrame(loop);
  }
  requestAnimationFrame(loop);
}

fun1();

[sxjeru]

按网上的方案，web worker 模拟可行。

const workerCode = URL.createObjectURL(
  new Blob(
    [
      "self.addEventListener('message', (event) => {" +
        "setInterval(() => {" +
        "self.postMessage(new Date() * 1);" +
        '}, 100);' +
        '});',
    ],
    { type: 'text/javascript' }
  )
);

// 创建 Worker 实例，并指定 Blob URL
const worker = new Worker(workerCode);

var t = new Date() * 1;

worker.onmessage = (event) => {
  const _t = event.data;
  console.log(_t - t);
  t = _t;
};

worker.postMessage('start');

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

According to the online plan, web worker simulation is feasible.

const workerCode = URL.createObjectURL(
  newBlob(
    [
      "self.addEventListener('message', (event) => {" +
        "setInterval(() => {" +
        "self.postMessage(new Date() * 1);" +
        '}, 100);' +
        '});',
    ],
    { type: 'text/javascript' }
  )
);

//Create a Worker instance and specify the Blob URL
const worker = new Worker(workerCode);

var t = new Date() * 1;

worker.onmessage = (event) => {
  const _t = event.data;
  console.log(_t - t);
  t = _t;
};

worker.postMessage('start');

[lobehubbot]

👋 @{{ author }}


Since the issue was labeled with 🤔 Need Reproduce, but no response in 3 days. This issue will be closed. If you have any questions, you can comment and reply.
由于该 issue 被标记为需要更多信息，却 3 天未收到回应。现关闭 issue，若有任何问题，可评论回复。

[lobehubbot]

✅ @gaye746560359

This issue is closed, If you have any questions, you can comment and reply.
此问题已经关闭。如果您有任何问题，可以留言并回复。