each方法里的定时器的问题

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>each</title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <ul>
        <li class="on">0</li>
        <li class="on">0</li>
        <li class="on">0</li>
        <li class="on">0</li>
        <li class="on">0</li>
        <li class="on">0</li>
        <li class="on">0</li>
        <li class="on">0</li>
    </ul>
<script type="text/javascript">
    var num = 0,
    timer = null;
    $(".on").each(function (index, value) {
        timer = setInterval(function(){
            if (num == 900) {
                clearInterval(timer);
            }else{
                num++;
            }
            $(value).text(num);
        },50)
    })
 
</script>
</body>
</html>

第一个疑问if(num==1000)和if(num==900)得到的最后样子不同?num==900时,除了最后一个差几个900,其他的都是900,而1000时,li可以全变成1000?
第二个疑问定时器里的函数写成这样为什么只有最后一个li停了其他的li停不下来

    timer = setInterval(function(){
        if (num == 998) {
            clearInterval(timer);
        }
        num++;
        $(value).text(num);
    },50)
阅读 2.7k
1 个回答

timer作为全局变量,他的引用指向了最后一个绑定的定时器,当clearInterval时只有最后绑定的那个定时器被停止了,数字不再变化仅仅是因为num不再增加了,你可以在定时器里console.log(num),就会发现只有最后的定时器停下来了

至于为什么1000的是这样,900不是,是因为1000/8能整除,取决于li元素的个数,巧合而已,没有特别原因

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题