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

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和谷歌都出现这个问题，其他游览器没试)
...全文
165 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含解析
在复习这部分内容时，学生需要对锰元素在人体内的具体作用机制和相关的生物化学过程有一个清晰的认识。 接下来，我们关注的是我国自主研发的磁浮列车技术。这项技术的特点是利用常导电磁吸引力控制悬浮，以实现列车...
江西省南昌市第二中学2019_2020学年高二化学上学期期中试题含解析
在解析中提到，若一个反应的ΔH（焓变）为正，ΔS（熵变）也为正，则反应倾向于自发进行，这是因为在宏观上系统总是朝着熵增大的方向发展，即系统更加无序的方向演化。熵增原理在化学反应的自发性判断中发挥着关键...
八年级下册说明文阅读练习与答案解析.doc
此外，文章还涉及到了恐龙灭绝的原因，这不仅是一个生物学问题，也与天体物理学、地质学等多个学科有着紧密的联系。 这两篇文章的阅读练习不仅仅是科学知识的传授，更重要的是让学生学会如何通过阅读来理解科学概念...
移动通讯英文版————现在很少见的
在过去几十年间，移动通讯作为电信行业的一个分支，展现出了惊人的增长速度。这一现象不仅体现在全球主要电信运营商收入的持续攀升上，同时也吸引了众多新兴竞争者加入市场。然而，在整个电信行业中，没有任何一个...
外研版高中英语选修8语篇提能练习题及答案解析30份18精选.doc
同时，它还为学生提供了一个了解世界、探索科学的机会，帮助他们在面对自然现象时能够更加理性地分析和判断。这份精选练习资料无疑是高中英语教育中的一份宝贵财富，值得每一位学习者细细品味和深入研究。
JavaScript

87,997

社区成员

224,709

社区内容

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

加载中

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

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

+ 用AI写文章