没分了，求解析一个很少见的现象

JS_weifeng 2017-03-24 10:10:54
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1{width:0px; height:0px; background:#CCC; position:absolute; left:0px; top:0px;}
#div2{width:0px; height:0px; background:#000; position:absolute; left:500px; top:300px;}
#div3{width:0px; height:0px; background:#FF0; position:absolute; left:0px; top:0px;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-1.3.2.min.js"></script>
<script>
$(function(){
var j=1;
var oDiv1=document.getElementById('div1')
var oDiv2=document.getElementById('div2')
var oDiv3=document.getElementById('div3')
setInterval(function(){
if(j==6)
{
j=1
}
else
{
j++
}
if(j==1)
{
$('#div1').animate({height:300,width:500},2500,function(){
$('#div1').animate({height:0,width:0,left:500,top:300},3500)
})
}
else if(j==2)
{
$('#div2').animate({height:300,width:500,left:0,top:0},2500,function(){
$('#div2').animate({height:0,width:0,left:0,top:0},3500)
})
}
else if(j==3)
{
$('#div3').animate({height:300,width:500,left:0,top:0},2500,function(){
$('#div3').animate({height:0,width:0,left:500,top:300},3500)
})
}
else if(j==4)
{
$('#div1').animate({height:300,width:500,left:0,top:0},2500,function(){
$('#div1').animate({height:0,width:0,left:0,top:0},3500)
})
}
else if(j==5)
{
$('#div2').animate({height:300,width:500,left:0,top:0},2500,function(){
$('#div2').animate({height:0,width:0,left:500,top:300},3500)
})
}
else if(j==6)
{
$('#div3').animate({height:300,width:500,left:0,top:0},2500,function(){
$('#div3').animate({height:0,width:0,left:0,top:0},3500)
})
}
},6000)
$('#div1').animate({height:300,width:500},2500,function(){
$('#div1').animate({height:0,width:0,left:500,top:300},3500)
})
})
</script>
</head>

<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
为什么我把游览器隐藏到工具栏，等一会，再查看页面运行的效果，会出现两个Div同时执行的现象(感觉上是一个定时器没有关闭，一个定时器又开了，如果不隐藏到工具栏就没有这个问题)，我也不知道这样描述对不对，自己实验一下就发现问题了。求解产生这个问题的原因，怎么解决？(IE8和谷歌都出现这个问题，其他游览器没试)
...全文
162 8 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
8 条回复
切换为时间正序
请发表友善的回复…
发表回复
天际的海浪 2017-03-25
  • 打赏
  • 举报
 回复
最好的方法是让页面上同一时间只存在一个定时器。 当这个定时器执行完这之后再创建另一个。
JS_weifeng 2017-03-25
  • 打赏
  • 举报
 回复
引用 6 楼 jslang 的回复:
现代的浏览器为了节能和节约系统cpu资源， 当页面不可见时会暂停页面上的css动画和js的中的定时器。 等到当页面恢复可见时会继续启动这些的css动画和的定时器。 这样就可能让多个本应该在不同时段触发的定时器，在恢复启动时一同触发，造成程序的逻辑性错误。 我们只要知道这一情况，进行针对处理就行了。
怎么解决呢？我想到一个解决方法，就是给他加一个点击事件或其他事件，让用户操作以后再触发该定时器····
天际的海浪 2017-03-24
  • 打赏
  • 举报
 回复
现代的浏览器为了节能和节约系统cpu资源， 当页面不可见时会暂停页面上的css动画和js的中的定时器。 等到当页面恢复可见时会继续启动这些的css动画和的定时器。 这样就可能让多个本应该在不同时段触发的定时器，在恢复启动时一同触发，造成程序的逻辑性错误。 我们只要知道这一情况，进行针对处理就行了。
JS_weifeng 2017-03-24
  • 打赏
  • 举报
 回复
如果隐藏在工具栏久了，再打开页面查看不堪入目的结果，求解原因和解决方法！
JS_weifeng 2017-03-24
  • 打赏
  • 举报
 回复
引用 4 楼 Free_Wind22 的回复:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1{width:0px; height:0px; background:#CCC; position:absolute; left:0px; top:0px;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
	<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function() {
	var color = ["#CCC", "#000", "#FF0"], i = 0, flag = false,
		x = 0, y = 0, w = 500, h = 300,
		div = $("#div1");

    function animate(){
		div.animate({left: 0, top: 0, width: w, height: h}, 1000, function(){
			if(flag){
				x = 0, y = 0;
			}else{
				x = w, y = h;
			}
			div.animate({ left: x, top: y, width:0, height:0}, 1000, next);
		});
	}
	function next(){
		i = ++i % color.length;
		div.css("backgroundColor", color[i]);
		flag = !flag;
		animate();
	}
	animate();
})
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
简化了一下
为什么会那样呢?如果一直盯着不会出现问题，一旦放在缩放到工具栏就开始出问题了，这个才是百思不得其解的···
囧 2017-03-24
  • 打赏
  • 举报
 回复 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1{width:0px; height:0px; background:#CCC; position:absolute; left:0px; top:0px;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
	<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function() {
	var color = ["#CCC", "#000", "#FF0"], i = 0, flag = false,
		x = 0, y = 0, w = 500, h = 300,
		div = $("#div1");

    function animate(){
		div.animate({left: 0, top: 0, width: w, height: h}, 1000, function(){
			if(flag){
				x = 0, y = 0;
			}else{
				x = w, y = h;
			}
			div.animate({ left: x, top: y, width:0, height:0}, 1000, next);
		});
	}
	function next(){
		i = ++i % color.length;
		div.css("backgroundColor", color[i]);
		flag = !flag;
		animate();
	}
	animate();
})
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
简化了一下
囧 2017-03-24
  • 打赏
  • 举报
 回复
你定时器里的6秒和你2个动画加起来的6秒没同步到就这样了吧 可以不要setInterval,等第二个动画完了再运行
A无殇A 2017-03-24
  • 打赏
  • 举报
 回复
为什么不用递归来实现呢
2020高考语文二轮复习增分题目组合练18含解析
2020高考语文二轮复习增分题目组合练18含解析
江西省南昌市第二中学2019_2020学年高二化学上学期期中试题含解析
江西省南昌市第二中学2019_2020学年高二化学上学期期中试题含解析
八年级下册说明文阅读练习与答案解析.doc
八年级下册说明文阅读练习与答案解析.doc
移动通讯英文版————现在很少见的
该书是移动通讯的英文版的讲义，原版已经绝版了，不多见了啊
外研版高中英语选修8语篇提能练习题及答案解析30份18精选.doc
外研版高中英语选修8语篇提能练习题及答案解析30份18精选.doc
JavaScript

87,997

社区成员

224,709

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章