Question

我要求显示执行某些操作的人数的实时更新。我通过每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秒进行一次通话。我正在测试铬。

Answer 1

在Coffeescript w / jquery中：

$ ->
  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()

Answer 2

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

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

从那里，清除你的间隔或重新开始它。

Answer 3

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

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);

选项卡未对焦时暂停Javascript计时器

3 个答案: