我setInterval每秒运行一段代码30次.这很好用,但是当我选择另一个选项卡(以便我的代码的选项卡变为非活动状态)时,由于setInterval某种原因将其设置为空闲状态.
我做了这个简化的测试用例(http://jsfiddle.net/7f6DX/3/):
var $div = $('div');
var a = 0;
setInterval(function() {
a++;
$div.css("left", a)
}, 1000 / 30);
Run Code Online (Sandbox Code Playgroud)
如果您运行此代码然后切换到另一个选项卡,等待几秒钟然后返回,动画将继续在您切换到另一个选项卡时的位置.因此,如果选项卡处于非活动状态,则动画不会每秒运行30次.这可以通过计算setInterval每秒调用函数的次数来确认- 如果选项卡处于非活动状态,则不会是30,而只是1或2.
我想这是通过设计完成的,以提高性能,但有没有办法禁用这种行为?在我的场景中,它实际上是一个缺点.
我最近承担了在Javascript/jQuery中构建动画的任务.动画由围绕伦敦地图移动的圆圈组成.每次通过一个电台时,电台名称都带有下划线.
我仍在努力改进它,并注意到当标签处于非活动状态时,如果在返回页面时混淆了序列的时间.因为我将它嵌入iframe中当我使用$(window).focus()或时它似乎不起作用$(window).blur().
我使用jQuery动画函数为圆圈设置了动画,并简单地在文本下的所有行上设置了不透明度0并为它们添加了延迟,以便将不透明度设置为100.我在下面放了一个链接来显示动画,因为它是.我目前正在调整的动画仍有问题,但我不知道如何修复非活动标签问题.任何帮助都会很棒.
无框架: http ://www.gbutlercreative.co.uk/london/index.html
给出以下jsFiddle,这是一个简单的递增计数器
....如果我使用移动设备(智能手机或平板电脑为了争论)访问上面的网址,计数器开始按照您的预期递增,只要有JavaScript支持,那么看来如果我按"主页" "按钮,或单击电源按钮一次关闭屏幕(但保持手机开机),然后脚本将停止运行,计数器停止递增.我期待这种情况发生,并且我理解为什么在移动设备上保留电池寿命非常重要的原因,因此UI线程睡眠或类似情况是有道理的.重新访问浏览器后,计数器将继续递增.在现实世界中,我假设,尽管处于不活动期,但使用JavaScript确定超时时间的网站不会超时.
我也假设,这将因设备而异,通过固件,通过软件什-什么,我想在这里确定是是否有一个标准的方法或默认行为内置到手机的发展框架,这和如何在任何形式的一致性设备的行为.
我不完全确定我在这里问过一个好问题,但我很难从SO中找到100%的相关信息,或者我不太清楚在搜索时我需要问什么问题.
谢谢
javascript ×2
android ×1
delay ×1
dom-events ×1
ios ×1
jquery ×1
mobile ×1
setinterval ×1
tabs ×1