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

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

7 个解决方案

#1

感觉和时间精度有关
几年前注意过所谓的定时器16ms左右的极限，但是这次开始给的是30，出现紊乱几率很高，改为50就基本没有出现了。
真的睡了，凌晨3点的程序猿，我喂自己袋盐！！有人遇到过chrome下切换tab页定时器紊乱的BUG吗？

#2

30ms太快了吧

#3

调到500一样有。。关键应该不在此。

#4

测试代码如下



<!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>

#5

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

#6

没有看出什么问题，你要不改成下面这样试下。

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);

#7

引用 6 楼 bbjbepzz 的回复:

没有看出什么问题，你要不改成下面这样试下。

function onescroll() {
            //推进
            if (($("#srcDiv").outerWidth(true) * 2) <= ($("#wrap").scrollLeft() + margin * 3)) {
                $("#wr……

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

#1

#2