javascript - 当选项卡不在焦点上时暂停 Javascript 计时器

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 秒进行一次调用。我在 chrome 中测试。

Answer 1

在带有 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()