当我切换到浏览器上的另一个选项卡时，js 似乎停止工作，是一个问题吗？

Question

我做了一个时钟。我意识到，当我切换另一个选项卡并在一段时间后返回时，时钟停止在当前时间之后。我发现了一个叫webworkers的东西，和这个有关系吗？

我希望代码随时可以工作，但事实并非如此。

let numbers = document.getElementsByClassName('number'); 
 let numbersLength = numbers.length-1;  
 let numberContainer = document.querySelectorAll('.number > div'); 
 let minute = document.querySelector('#minute'); 
 let hour = document.querySelector('#hour'); 
 let second = document.querySelector('#second'); 
 let startSecond = new Date().getSeconds()*6; 
 let startHour = new Date().getHours()*30; 
 let startMinute = new Date().getMinutes()*6; 
  
  
 setInterval(increaseSecond, 1000); 
  
 function readyHour() { 
     //second starting position 
     second.style.transform = `rotate(${startSecond}deg)`; 
     minute.style.transform = `rotate(${startMinute}deg)`; 
     hour.style.transform = `rotate(${startHour}deg)`; 
  
     //numbers positions 
     for(let i = 0; i <= numbersLength; i++){ 
         numbers[i].style.transform = `rotate(${i*30}deg)`; 
         numberContainer[i].style.transform = `rotate(${-(i*30)}deg)`; 
     } 
 } 
 readyHour(); 
  
 function increaseSecond(){ 
     let currentSecond = new Date().getSeconds(); 
     let currentMinute = new Date().getMinutes(); 
     let currentHour = new Date().getHours(); 
  
     second.style.transform = `rotate(${currentSecond*6}deg)`; 
     if(currentSecond === 0){ 
         minute.style.transform = `rotate(${currentMinute*6}deg)`; 
     }; 
  
     if(currentMinute === 0) 
         hour.style.transform = `rotate(${currentHour*30}deg)`; 
  
     console.log(currentMinute+ " " + currentMinute*6) 
 }

Answer 1

浏览器通常会优化后台选项卡以使用更少的资源，其中可能包括限制或停止 JavaScript 执行。对于你的情况，使用 Web Worker 确实可以解决这个问题。 Web Worker 在后台独立于主 JavaScript 线程运行，并且即使选项卡未处于活动状态也会继续执行。

以下是如何使用 Web Worker 实现时钟：

worker.js（Web Worker 脚本）

let startSecond = new Date().getSeconds() * 6;
let startHour = new Date().getHours() * 30;
let startMinute = new Date().getMinutes() * 6;

function increaseSecond() {
    let currentSecond = new Date().getSeconds();
    let currentMinute = new Date().getMinutes();
    let currentHour = new Date().getHours();

    postMessage({
        second: currentSecond,
        minute: currentMinute,
        hour: currentHour
    });

    setTimeout(increaseSecond, 1000);
}

increaseSecond();

main.js

let worker = new Worker('worker.js');

worker.onmessage = function(event) {
    let currentSecond = event.data.second;
    let currentMinute = event.data.minute;
    let currentHour = event.data.hour;

    second.style.transform = `rotate(${currentSecond * 6}deg)`;
    if (currentSecond === 0) {
        minute.style.transform = `rotate(${currentMinute * 6}deg)`;
    }

    if (currentMinute === 0) {
        hour.style.transform = `rotate(${currentHour * 30}deg)`;
    }
};

worker.postMessage(null); // Start the worker.

在此设置中：

1. worker.js 包含更新时钟时间的逻辑。它在后台独立运行。
2. main.js 创建一个新的 Web Worker 并侦听来自该 Worker 的消息。当工作线程更新时间时，它会向主线程发送一条消息，然后主线程相应地更新时钟。

使用 Web Worker 可以确保即使选项卡未处于活动状态，您的时钟也能继续运行。请记住调整工作脚本的路径并包含适合时钟元素的 HTML 结构。