如何判断Browser/tab是否处于活动状态

Question

如何判断Browser/tab是否处于活动状态我有一个函数，它每秒钟调用一次，只有在当前页面位于前台时才能运行，也就是说，用户没有最小化浏览器或切换到另一个选项卡。如果用户不看它，并且可能是CPU密集型的，那么它就没有用，所以我不想在后台浪费周期。有人知道如何用JavaScript告诉这个吗？注意：我使用jQuery，所以如果您的答案使用jQuery，那很好：)。

Answer 1

你会用focus和blur窗口事件：

var interval_id;$(window).focus(function() {
    if (!interval_id)
        interval_id = setInterval(hard_work, 1000);});$(window).blur(function() {
    clearInterval(interval_id);
    interval_id = 0;});

---

要回答评论的“Double Fire”问题，并保持jQuery的易用性：

$(window).on("blur focus", function(e) {
    var prevType = $(this).data("prevType");

    if (prevType != e.type) {   //  reduce double fire issues
        switch (e.type) {
            case "blur":
                // do work
                break;
            case "focus":
                // do work
                break;
        }
    }

    $(this).data("prevType", e.type);})

点击查看显示它工作的示例代码(JSFiddle)

Answer 2

我会尝试在window.onfocus和window.onblur事件。

以下代码片段已经在Firefox、Safari和Chrome上进行了测试，打开控制台并在选项卡之间来回移动：

var isTabActive;window.onfocus = function () { 
  isTabActive = true; }; window.onblur = function () { 
  isTabActive = false; }; // testsetInterval(function () { 
  console.log(window.isTabActive ? 'active' : 'inactive'); }, 1000);

试试看这里.