javascript - each方法裡的定時器的問題
为情所困
为情所困 2017-05-18 10:58:13
0
1
377
<!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)
为情所困
为情所困

全部回覆(1)
我想大声告诉你

timer作為全域變量,他的引用指向了最後一個綁定的定時器,當clearInterval時只有最後綁定的那個定時器被停止了,數字不再變化僅僅是因為num不再增加了,你可以在定時器裡console.log(num),就會發現只有最後的定時器停下來了

至於為什麼1000的是這樣,900不是,是因為1000/8能整除,取決於li元素的個數,巧合而已,沒有特別原因

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板