1

我需要显示执行某些操作的人数的实时更新。我通过每 20 秒向服务器发出一个 ajax 请求来实现此功能。但是即使选项卡不在焦点/没有人在查看更新，也会发生此 ajax 请求。有没有办法确定标签是否处于活动状态？

我有以下代码（简化版），但它不起作用。

timer = undefined
$(document).ready ->
  timedCountUpdate()
  window.top.onblur = ->
    clearTimeout(timer)
  window.top.onfocus = ->
    timer = timedCountUpdate()

@timedCountUpdate = () ->
  timer = setTimeout(updateCountIndicator, 20000)

@updateCountIndicator = () ->
  $('.indicator').html = 100
  timedCountUpdate()

即使我不在已加载应用程序的选项卡中，我仍然会看到每 20 秒拨打一次电话。我正在用 chrome 进行测试。

4

3 回答 3

2

在带有 jquery 的 Coffeescript 中：

$ ->
  timeout_id = null

  resumeTimer = () ->
    # make ajax call here

    # Prevent multiple timers from operating simultaneously:
    clearTimeout timeout_id if timeout_id?

    # Recursive step (ideally fires in 'success' handler of ajax call)
    timeout_id = setTimeout(resumeTimer, 2000)

  $(window.top).focus () =>
    resumeTimer()
  $(window.top).blur () =>
    clearTimeout timeout_id

  # Start timer immediately:
  resumeTimer()
于 2013-10-01T22:21:21.367 回答
2

我知道这是一个老问题，但我在 Google 搜索中偶然发现了它，并想提供另一种更适合您想要做的事情的替代方案。

Page Visibility API是这些类型的事情应该如何向前推进（或现在的 IE10+）。API 提供了一个visibilityChange在选项卡的可见性更改时触发的事件。在回调中，检查document.hidden属性将告诉您选项卡是否隐藏。

从那里，清除您的间隔或重新启动它。

于 2015-07-22T15:12:24.740 回答
0

在你的情况下，我会做类似的事情：

var tab_paused = false; // global

if (typeof window.top.onblur === 'function')
{
    window.top.onblur = function() {
     tab_paused = true;
    };
}
if (typeof window.top.onfocus === 'function')
{
    window.top.onfocus = function() {
     tab_paused = false;
    };
}
if (typeof document.onfocusout === 'function')
{
    document.onfocusin = function() {
     tab_paused = true;
    };
}
if (typeof document.onfocusin === 'function')
{
    document.onfocusin = function() {
     tab_paused = false;
    };
}

var ctx = setInterval(function() {
 if (tab_paused === false)
 {
  $('.indicator').html(100);
 }
}, 100);
于 2013-09-30T22:50:54.123 回答