我正在开发的应用程序是基于jQuery Mobile和一些Ajax来刷新页面的部分.像使用自动刷新的网站一样,我想在一些条件(时间/可见性等)之后停止刷新,所以我的服务器不会被不必要的请求轰炸.应用程序具有通常由用户检查的状态屏幕,理想情况下,我的脚本将知道浏览器窗口已经成为焦点,这将是一个很好的刷新时间.我以前在桌面webapps中做到这一点,但我注意到不同平台和浏览器之间的移动端有很多变化,例如：
> window.onfocus()在浏览器获取焦点时/不会触发
>当浏览器中的标签页被切换时,window.onfocus()不会触发/不触发
>在浏览器之间的标签开关和/或开关之间没有挂起Javascript
迄今为止,我所能做的最好的一组启发式方法是在检测到用户与页面进行交互时查看可用的事件,但是它很笨重,并且会导致用户跳回到页面并且必须手动刷新.不是很好.
任何聪明的技巧来解决这个问题？
解决方法
如果您只想知道浏览器窗口是否已经失焦,请使用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次.