The timer is nested in the for loop. When you click tab to switch, there will be bug,. Who can help me to see what the problem is?

<!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 -sharp666;
    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 -sharpccc;
}



</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 ; iPP) {
            (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>

<!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 -sharp666; 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 -sharpccc; } </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 ; iPP) { var t=list[i].time; t--; list[i].time=t; $(".list").eq(Index).find("li").eq(i).html(t) } }, 1000); } }) </script> </body> </html>