当我的网站的标签处于非活动状态时,我的幻灯片开始切换图片的速度太快,把整个事情搞得一团糟。
有没有办法让我解决这个问题?
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);
});
发布于 2013-02-28 18:26:31
可以将代码封装在下面的代码中:
$(document).ready(function(){
$([window, document]).focusin(function(){
//code run when tab is selected
}).focusin(function(){
//code to stop all animation
});
});
这将使幻灯片只在用户查看您的站点时运行。
发布于 2013-02-28 19:10:34
我不知道为什么事情会变快。通常情况下,后台选项卡上的计时器会减慢到至少一秒,但这不会影响您的方案。我建议使用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);
});
发布于 2019-02-10 13:09:18
我认为对于实际版本的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
}
https://stackoverflow.com/questions/15142773
复制相似问题