定时器bug，附测试源码

从dev-tools的控制台里观察输出-------end时scrollLeft的数值，不能被200整除的应该都是不正常的。
能解决此bug，或者可以实现此效果兼容各浏览器的，在另个帖子也回一下，拿200X2分

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!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>
目前发现关键在于begin的取值，切换tab后一段时间再回来，两个定时器之间错乱了。
再观察测试一下，没有异常就结帖。
不过好歹来个人讨论一下啊，别让我结不了帖。
目测是timer每次执行的时候，timer1还没有执行到clearInterval(timer1)，导致的timer再执行的时候begin每次被重新赋值的原因，改成这样试试看。<!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 (timer) clearTimeout(timer);
                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");
                    timer = setTimeout(onescroll, frequency);
                }
            }, 30);
        }

        var timer = setTimeout(onescroll, frequency);
    });
</script>
</body>
</html>
GJ~~
我是加了个pos定位，你这样更优雅！结帖了！