当制表符不是焦点时保留脚本运行。 (JS)

Question

所以我为我的工作构建了一个小应用程序，这样他们就可以在后台设置一个计时器运行，每 10 分钟响一次（当分钟列中的最后一位数字为“0”时），并且它完全按照我的意图工作。但是，当大约 5 分钟后选项卡不是焦点时，它不会提示。如果我在它响起前几分钟切换标签，我可以听到声音，但如果我在 9 分钟前切换，它会保持静音。我不知道如何让它在后台保持活力。我不想建一个 windows 应用程序，因为老板为了方便要求它是一个网页。这是我正在使用的代码（时钟本身不是我的作品）：

<!DOCTYPE html>
<!-- saved from url=(0095)https://www.nayuki.io/res/full-screen-clock-javascript/full-screen-clock-12hr-with-seconds.html -->
<html style="height:100%; margin:0; padding:0" class="gr__nayuki_io">
    <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <title>Clock</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
        <style type="text/css">
            /* Customizable font and colors */
            html {
                background-image: linear-gradient(to bottom right, #0e284e, #6495db);
                font-family: 'Roboto', sans-serif;
                font-weight: bold;
                color: #FFFFFF;
            }
        </style>
        </head>
    
    <body style="display:flex; flex-direction: column; height:100%; margin:0; padding:0; justify-content:center; align-items:center" data-gr-c-s-loaded="true">
        <img id="logo" src="logo.png" alt="Emmaus College" style="height:40%;">
        <p id="clocktext" style="display: block; font-kerning: none; font-size: 22vw; padding: 0; margin: 0;">12:34</p>
        <script src="howler/howler.js"></script>
        <script type="text/javascript">
            "use strict";

            var dingSound = new Howl({
                src: ['Ding.ogg', 'Ding.mp3'],
                loop: false
            });
            var targetWidth = 0.9;  // Proportion of full screen width
            var curFontSize = 20;  // Do not change
            var hasDinged = false; // Check to see if the ding has rung this minute
            
            function updateClock() {
                var d = new Date();
                var s = "";
                s += ((d.getHours() + 11) % 12 + 1) + ":";
                s += (10 > d.getMinutes() ? "0" : "") + d.getMinutes() /*+ ":"*/;
                //s += (10 > d.getSeconds() ? "0" : "") + d.getSeconds() + "\u00A0";
                //s += d.getHours() >= 12 ? "pm" : "am";
                $("#clocktext").text(s);
                setTimeout(updateClock, 1000 - d.getTime() % 1000 + 20);
                
                var endsInZero = d.getMinutes() % 10;
                if (endsInZero == 0) {
                    if (hasDinged == false) {
                        dingSound.play();
                        hasDinged = true;
                    }
                }
                else
                {
                    hasDinged = false;
                }
            }

            updateClock();
        </script>
    </body>
</html>

如有任何帮助，我们将不胜感激。

干杯，

-斯科博

Answer 1

Chrome 将限制未聚焦的选项卡的 JS。您应该在整个 10 分钟的开始使用一个 setInterval，然后只使用时钟视觉的小超时。您可能需要使用 Date.now().

保持时钟视觉同步

当制表符不是焦点时保留脚本运行。 (JS)

Keeping script running when tab is not the focus. (JS)

javascript

jquery

focus

当制表符不是焦点时保留脚本 运行。 (JS)

Keeping script running when tab is not the focus. (JS)

javascript

jquery

focus

当制表符不是焦点时保留脚本运行。 (JS)