浏览器Tab切换导致定时器Settimeout不准浏览器Tab切换导致定时器Settimeout不准浏览器Tab切换导致

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      function mock() {
        let duration = 120;
        const loop = () => {
          if (duration > 0) {
            setTimeout(() => {
              duration--;
              console.log(duration, "=====真是定时器");
              loop();
            }, 1000);
          }
        };

        loop();
      }
      mock();

      function countdown(duration, callback) {
        const startTime = performance.now();

        function tick() {
          const currentTime = performance.now();
          const elapsedTime = currentTime - startTime;
          const remainingTime = duration - elapsedTime;
          console.log(Math.ceil(remainingTime / 1000), "====");
          if (remainingTime <= 0) {
            callback();
          } else {
            setTimeout(tick, Math.max(0, 1000));
          }
        }

        tick();
      }

      // 使用示例
      const duration = 120 * 1000; // 倒计时时长为6秒

      countdown(duration, () => {
        console.log("优化倒计时结束");
      });
    </script>
  </body>
</html>