jquery - 如何检测移动设备上的浏览器焦点？

Question

我正在开发的应用程序是围绕 jQuery Mobile 和一些用于刷新页面部分的 Ajax 构建的。就像使用自动刷新的网站一样，我想在某些条件(时间/可见性/等)后停止刷新，这样我的服务器就不会受到不需要的请求的轰炸。该应用程序有一个通常由用户检查的状态屏幕，理想情况下我的脚本会知道浏览器窗口已成为焦点，并且是刷新的好时机。我之前在桌面网络应用程序中做过此操作，但我注意到不同平台和浏览器之间的移动端存在很多差异，例如:

• 当浏览器获得焦点时，window.onfocus() 不会触发
• 在浏览器中切换选项卡时，window.onfocus() 不会触发
• Javascript 在选项卡切换和/或离开浏览器之间不会暂停

到目前为止，我能做的最好的事情是一组启发式方法，用于查看可用事件+何时检测到用户与页面的交互，但它很笨重，并且会导致用户跳回页面的情况并且必须手动刷新。不太好。

有什么巧妙的技术可以解决这个问题吗？

Answer 1

如果您只是想知道浏览器窗口是否失去焦点，请使用 requestAnimationFrame 函数。

window.requestAnimFrame = window.requestAnimationFrame ||
                          window.mozRequestAnimationFrame || 
                          <add browsers here>

然后在你的代码中

var lastupdate = new Date()
(function loop() {
      var now = new Date();

      if ( now - lastupdate > <some treshold like 1 second> ) {
          // browser was suspended and did come back to focus
      }
      lastupdate = now;

      window.requestAnimFrame(loop);
})();

技巧是，如果选项卡或窗口失去焦点，浏览器不会提供动画帧。正常的 setInterval 和 setTimeouts 仍然有效。当窗口获得焦点时，此循环将连续运行，但开销很小，在移动设备中每秒可能调用 3-5 次。