有人遇到过chrome下切换tab页定时器紊乱的BUG吗？

潮起潮落 2013-03-25 03:11:01

tab页固定在这个页面是正常的，切换到其他tab页浏览再回来，定时器就紊乱了。
打开这个页面，你看着他的时候，是正常的，然后切换到其他的tab页，再回来，很大几率就会出现紊乱情况。
这个问题是如此的难以名状- - 但是我想遇到过的都会有印象。。。抱着试一试的心态咨询一下，睡觉了

...全文

982 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

潮起潮落 2013-03-25

打赏
举报

引用 6 楼 bbjbepzz 的回复:

没有看出什么问题，你要不改成下面这样试下。 function onescroll() { //推进 if (($("#srcDiv").outerWidth(true) * 2) <= ($("#wrap").scrollLeft() + margin * 3)) { $("#wr……

嗯感谢！确实是这个问题，两个定时器在切换回页面时候紊乱了。应该是timer1未执行完毕的时候就执行了timer，然后begin就错了。

bbjbepzz 2013-03-25

打赏
举报

没有看出什么问题，你要不改成下面这样试下。 function onescroll() { //推进 if (($("#srcDiv").outerWidth(true) * 2) <= ($("#wrap").scrollLeft() + margin * 3)) { $("#wrap").scrollLeft(0); } begin = $("#wrap").scrollLeft(); var timer1 = setInterval(function () { if (begin + margin > $("#wrap").scrollLeft()) { $("#wrap").scrollLeft($("#wrap").scrollLeft() + 10); console.log($("#wrap").scrollLeft()); } else { clearInterval(timer1); setTimeout(onescroll , frequency); $("#wrap").scrollLeft(begin + margin); console.log($("#wrap").scrollLeft() + "-----------end"); } }, 15); } setTimeout(onescroll , frequency);

潮起潮落 2013-03-25

打赏
举报

目前发现关键在于begin的取值，切换tab后一段时间再回来，两个定时器之间错乱了。再观察测试一下，没有异常就结帖。不过好歹来个人讨论一下啊，别让我结不了帖。

潮起潮落 2013-03-25

打赏
举报

测试代码如下


<!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>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style>
	*{
		margin : 0 auto;
		padding : 0;
	}
	#wrap{
		width:600px;
		height:300px;
		border:5px solid black;
		overflow:hidden;
	}
	#srcDiv{
		width:800px;
		height:300px;
		float:left;
	}
	#cloneDiv{
		width:800px;
		height:300px;
		float:left;
	}
	.item{
		width:100px;
		height:300px;
		margin:0 50px;
		background:red;
		float:left;
	}
	</style>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div id="wrap">
	<div style="width:800%;">
		<div id="srcDiv">
			<div class="item"></div>
			<div class="item"></div>
			<div class="item"></div>
			<div class="item"></div>
		</div>
		<div id="cloneDiv"></div>
	</div>
</div>
<script type="text/javascript">	
	$(document).ready(function () {
        var frequency = 5000;
        var margin = 200;
        var begin = 0;
		$("#cloneDiv").html($("#srcDiv").html());
        $("#wrap").scrollLeft(0);
        function onescroll() {
            //推进
            if (($("#srcDiv").outerWidth(true) * 2) <= ($("#wrap").scrollLeft() + margin * 3)) {
                $("#wrap").scrollLeft(0);
            }
            begin = $("#wrap").scrollLeft();

            var timer1 = setInterval(function () {
                if (begin + margin > $("#wrap").scrollLeft()) {
                    $("#wrap").scrollLeft($("#wrap").scrollLeft() + 10);
					console.log($("#wrap").scrollLeft());
                } else {
                    clearInterval(timer1);
                    $("#wrap").scrollLeft(begin + margin);
					console.log($("#wrap").scrollLeft() + "-----------end");
                }
            }, 30);
        }

        var timer = setInterval(onescroll, frequency);
	});
</script>
</body>
</html>

潮起潮落 2013-03-25