for循環(huán)里嵌套定時器，點擊tab切換時出現(xiàn)bug,哪位能幫忙看下問題出在哪里

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<style type="text/css">
*{
    padding:0;
    margin:0;
    list-style:none;
}
body{
    min-width:320px;
    max-width:640px;
    margin:0 auto;
}
.nav{
    border-bottom:1px solid #666;
    overflow:hidden;
}
.nav li{
    float:left;
    width:25%;
    height:40px;
    line-height:40px;
    text-align:center;
}
.nav li.active{
    border-bottom:2px solid red;
}
.list{
    display:none;
}
.list.active{
    display:block;
}
.list li{
    height:40px;
    border-bottom:1px solid #ccc;
}



</style>
<body>
   <ul class="nav">
     <li class="active">1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
   </ul>
   <div class="wrap">
       <ul class="list active">
           <li></li>
           <li></li>
           <li></li>
           <li></li>
       </ul>
       <ul class="list">
           <li></li>
           <li></li>
           <li></li>
           <li></li>
       </ul>
       <ul class="list">
           <li></li>
           <li></li>
           <li></li>
           <li></li>
       </ul>
       <ul class="list">
           <li></li>
           <li></li>
           <li></li>
           <li></li>
       </ul>
   </div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>   
<script type="text/javascript">
$(function(){
    var data=[
      {
       hasclick:true,      
       list:[
         {time:160},
         {time:150},
         {time:140},
         {time:130}
       ]
      },
      {
       hasclick:true,      
       list:[
         {time:260},
         {time:250},
         {time:240},
         {time:230}
       ]
      },
      {
       hasclick:true,       
       list:[
         {time:360},
         {time:350},
         {time:340},
         {time:330}
       ]
      },
      {
       hasclick:true,      
       list:[
         {time:460},
         {time:450},
         {time:440},
         {time:430}
       ]
      }
    ];
    var Index=0;
    timeFn()
    $(".nav li").click(function(){
        var _this=this
        Index=$(this).index();
        $(this).addClass("active").siblings().removeClass("active");
        $(".list").eq(Index).addClass("active").siblings().removeClass("active");
        timeFn()
    })
    
    function timeFn(){
        var list=data[Index].list;
    
        for(var i =0; i < list.length ; i++) {
            (function(i) {
                
                var timer = setInterval(function() {
                    var t=list[i].time;
                    t--
                    list[i].time=t;
            
                    $(".list").eq(Index).find("li").eq(i).html(t)
                }, 1000);
            })(i);
        }
        
        
    }
})
</script>
</body>
</html>

回答

編輯回答

笑浮塵

就是切換的時候塞數(shù)字的問題，為什么要用定時器呢，而且還是間隔一段時間執(zhí)行的
你不停的點擊不就有越來越多的定時器在執(zhí)行么，后面都不知道誰先執(zhí)行，誰后執(zhí)行

2017年7月13日 15:37

編輯回答

只愛你

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<style type="text/css">
*{
    padding:0;
    margin:0;
    list-style:none;
}
body{
    min-width:320px;
    max-width:640px;
    margin:0 auto;
}
.nav{
    border-bottom:1px solid #666;
    overflow:hidden;
}
.nav li{
    float:left;
    width:25%;
    height:40px;
    line-height:40px;
    text-align:center;
}
.nav li.active{
    border-bottom:2px solid red;
}
.list{
    display:none;
}
.list.active{
    display:block;
}
.list li{
    height:40px;
    border-bottom:1px solid #ccc;
}



</style>
<body>
   <ul class="nav">
     <li class="active">1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
   </ul>
   <div class="wrap">
       <ul class="list active">
           <li></li>
           <li></li>
           <li></li>
           <li></li>
       </ul>
       <ul class="list">
           <li></li>
           <li></li>
           <li></li>
           <li></li>
       </ul>
       <ul class="list">
           <li></li>
           <li></li>
           <li></li>
           <li></li>
       </ul>
       <ul class="list">
           <li></li>
           <li></li>
           <li></li>
           <li></li>
       </ul>
   </div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>   
<script type="text/javascript">
$(function(){
    var data=[
      {
       hasclick:true,      
       list:[
         {time:160},
         {time:150},
         {time:140},
         {time:130}
       ]
      },
      {
       hasclick:true,      
       list:[
         {time:260},
         {time:250},
         {time:240},
         {time:230}
       ]
      },
      {
       hasclick:true,       
       list:[
         {time:360},
         {time:350},
         {time:340},
         {time:330}
       ]
      },
      {
       hasclick:true,      
       list:[
         {time:460},
         {time:450},
         {time:440},
         {time:430}
       ]
      }
    ];
    var Index=0;
    var timer = timeFn();
    $(".nav li").click(function(){
        var _this=this
        Index=$(this).index();
        $(this).addClass("active").siblings().removeClass("active");
        $(".list").eq(Index).addClass("active").siblings().removeClass("active");
        clearInterval(timer);
        timer = timeFn()
    })
    
    function timeFn(){
        var list=data[Index].list;


        return setInterval(function() {
            for(var i =0; i < list.length ; i++) {
                var t=list[i].time;
                t--;
                list[i].time=t;

                $(".list").eq(Index).find("li").eq(i).html(t)
            }
        }, 1000);
        
        
    }
})
</script>
</body>
</html>

下次修改之前要先清空interval,另外把setInterval拿到循環(huán)外

2018年4月17日 03:12