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

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和谷歌都出现这个问题，其他游览器没试)
...全文
156 8 打赏 收藏 转发到动态 举报
写回复
用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
  • 打赏
  • 举报
 回复
为什么不用递归来实现呢
YOLOv2论文深度解析
课程时长近7个小时，详细解析了论文的内容。该课程力图帮助大家读到原汁原味的论文，对原论文进行了逐句解析。并以【左侧论文】、【右侧翻译、解析】的对比形式帮助大家更好地理解论文。该课程不仅仅包含了论文的...
android解析包时出现问题怎么解决方法,手机安装APP提示解析错误怎么办？解析包时出现问题如何解决？...
解析包时出现问题如何解决？安卓APP在安装的时候如果出现意味的操作，极容易出现“解析包时出现错误”的提示，当然这种情况极其少见，更多的原因是该安卓APP是经过第三方修改过的，建议在官方或应用平台下载APP。解析包时出现问题如何解决？方法一：通过正规的途径、知名度高的网站获取APP程序。下载到机顶盒或者智能电视机后一般都能很好的安装运行，且大部分软件都可以免费使用，无恶意插件。方法二：APP版本不兼...
android解析包时出现问题怎么解决方法,安装APK软件时发生“解析包时出现错误”的9大解决方法...
相信许多使用Android智能电视的用户都会或多或少的遇到到这样的问题：解析包时出现错误。那么遇到这样的问题该如何解决?其实导致apk程序安装失败的原因是多方面的，而这所有的错误都基本归结于一点“解析包时出现错误”，因此，我们只有采取逐个排查的方法来找到apk程序不能安装的原因。下面小编将给大家支几招解决此类问题的方法。方法一：通过正规的途径、知名度高的网站获取apk程序。例如当贝市场http:/...
matlab在sin处出现解析错误,破除“解析包时出现错误”方法大全,全部都在这了!...
原标题：破除“解析包时出现错误”方法大全,全部都在这了!相信许多使用Android设备的用户都会或多或少的遇到到这样的问题：解析包时出现错误。那么遇到这样的问题该如何解决?其实导致apk程序安装失败的原因是多方面的，而这所有的错误都基本归结于一点“解析包时出现错误”，因此，我们只有采取逐个排查的方法来找到apk程序不能安装的原因。 下面小编将给大家支几招解决此类问题的方法。方法一：通过正规的途径、...
matlab在tic处出现解析错误,破除“解析包时出现错误”方法大全,全部都在这了!...
原标题：破除“解析包时出现错误”方法大全,全部都在这了!相信许多使用Android设备的用户都会或多或少的遇到到这样的问题：解析包时出现错误。那么遇到这样的问题该如何解决?其实导致apk程序安装失败的原因是多方面的，而这所有的错误都基本归结于一点“解析包时出现错误”，因此，我们只有采取逐个排查的方法来找到apk程序不能安装的原因。 下面小编将给大家支几招解决此类问题的方法。方法一：通过正规的途径、...
JavaScript

87,914

社区成员

224,620

社区内容

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

加载中

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

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

+ 用AI写文章