页面未聚焦时停止倒计时[重复]

Question

大家好，我是 JavaScript 新手，我希望在页面加载时自动开始倒计时，并且只有在页面获得焦点时才会恢复。这是一个例子http://hp30405.pythonanywhere.com/mz7z5/。

如何在setTimeout(function() {}); 中使用相同的逻辑？

这是我的脚本：

$(window).load(function() {
    var timeleft = 20;
    var downloadTimer = setInterval(function() {
        document.getElementById("timer").innerHTML = timeleft;
        timeleft -= 1;
        if (timeleft < 0) {
            clearInterval(downloadTimer);
            document.getElementById("timer").innerHTML = "20 sec done";
        }
    }, 1000);

    setTimeout(function() {
        $("#submit").removeAttr("disabled");
    }, 22000);
});

Answer 1

您使用$(window).blur() 和$(window).focus() 到clearInterval 和setInterval。试试这个 不幸的是它在 sn-p 中不起作用，但在 sn-p 之外可以正常工作

let downloadTimer;
var timeleft = 20;
downloadTimer = setInterval(countDown, 1000);

function countDown() {
    document.getElementById("timer").innerHTML = timeleft;
    timeleft -= 1;
    if (timeleft < 0) {
        clearInterval(downloadTimer);
        document.getElementById("timer").innerHTML = "20 sec done";
    }
}

$(window).blur(function() {
    console.log("blurred");
    clearInterval(downloadTimer);
})
$(window).focus(function() {
    console.log("focuesed");
    downloadTimer = setInterval(countDown, 1000);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="timer"></div>