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

时间:2022-08-13 20:09:09
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


感觉和时间精度有关
几年前注意过所谓的定时器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就错了。