如何判断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);试试看这里.