jQuery setInterval太快,当选项卡是不活跃的
jQuery setInterval too fast when tab is inactive
当我的网站处于非活动状态时,我的幻灯片开始切换图片太快,把整个事情搞砸了。
有办法我可以解决这个问题吗?
var img_src = ["1.png", "2.png", "3.png", "4.png"];
var delay = 8000;
var first_run = true;
function switch_pic(position){
$("#show").attr("src", img_src[position]).fadeOut(0).fadeIn(4000).fadeOut(4000);
}
$(document).ready(function(){
var i = 0;
if(first_run){
switch_pic(i);
first_run = false;
i++;
}
window.setInterval(function(){
switch_pic(i);
delay += 8000;
i++;
if(i > 3){
i = 0;
window.clearInterval();
}
}, delay);
});
可以这样包装代码:
$(document).ready(function(){
$([window, document]).focusin(function(){
//code run when tab is selected
}).focusin(function(){
//code to stop all animation
});
});
这只会让幻灯片运行时,用户正在查看您的网站。
我不知道为什么事情会加速。通常情况下,背景选项卡上的计时器会减慢到至少一秒,但这应该不会影响您的场景。我建议使用console.log()跟踪对函数的调用。
同样,你可以简化你的主循环:
$(document).ready(function(){
var i = 0;
window.setInterval(function(){
switch_pic(i++); // increase i after call
if(i > 3) i = 0; // reset i
}, 8000);
});
我认为jQuery的实际版本应该是这样的:
var intervalId;
$([window, document]).on('focusin', function(){
intervalId = setInterval(function() {
// Action in interval
}, 3000);
}).on('focusout', function(){
if (intervalId) {
clearInterval(intervalId);
}
});
请记住,第一次你的'focusin'
没有触发当页面加载,所以你应该使用这个结构:
intervalFunction();
$([window, document]).on('focusin', function(){
if (!intervalId){
intervalFunction();
}
}).on('focusout', function(){
if (intervalId) {
clearInterval(intervalId);
intervalId = undefined;
}
});
function intervalFunction() {
// Your function hire
}
相关文章:
- 我的单元测试选项是什么
- 如何更改bigquery API中的计费层选项
- 使用Javascript获取所选选项ID
- Selectize.js:如何对整数值的选项进行排序
- 通过js在新选项卡中有条件地打开url
- 按照选项卡索引的顺序循环一个jQuery选择
- 如何在使用selectBoxIt JQuery插件时检测选项更改
- 无法在Ionic select中预先选择最后一个选项
- 如何在选项卡上定义属性'的主窗口对象
- 为什么grunt contrib connect的中间件选项的第三个参数是未定义的
- 使用此选项选择父类内部的类
- CKeditor:更改对话框中的默认选择选项
- JQuery覆盖不更改单选选项
- 活动选项卡's源代码-获取变量s值
- 绑定时将Parsley minlength消息作为选项传递时,未对其进行自定义
- 如果一个选项在json中已经存在,那么让它在输入字段中不活跃
- KineticJS:我怎么能保持一个渐变运行,而它的浏览器选项卡是不活跃的
- 在引导中动态添加/删除选项卡-使创建的选项卡活跃
- 如何保持会话活跃,即使我在同一浏览器的多个选项卡中打开
- jQuery setInterval太快,当选项卡是不活跃的