なぜこのsetInterval呼び出しが機能しないのですか？

Question

質問：

1. なぜ変更input radioが作業休止いけませんか？

2. input radioを変更すると、2時間より前にfunction move()を実行するのはなぜですか？

これは私のコードです：間隔は別のものを追加する前に追加された場合

$(document).ready(function(){ 
 
    
 
    var timer; 
 
    var which; 
 
    var number = 0; 
 
    
 
    move(); 
 
    
 
    $("input[type=radio]").on("change",function(){ 
 
    move(); 
 
    }) 
 
    
 
    $(".fa-pause").on("click",function(){ 
 
    $(this).css({color:"skyblue"}); 
 
    $(".fa-play").css({color:"red"}); 
 
    clearInterval(timer); 
 
    }) 
 
    
 
    $(".fa-play").on("click",function(){ 
 
    move(); 
 
    $(this).css({color:"skyblue"}); 
 
    $(".fa-pause").css({color:"red"}); 
 
    }) 
 
    
 
    function move() { 
 
    
 
    which = $("input[type=radio]:checked").attr("class"); 
 
    
 
    timer = setInterval(function(){ 
 
     
 
     number = parseFloat($(".number").text()) + 1; 
 
     
 
     if (which == "t1") { 
 
     $(".number").hide(750,function(){ 
 
      $(this).show(100).text(number); 
 
      }) 
 
     } 
 
     
 
     else if (which == "t2") { 
 
     $(".number").fadeOut(750,function(){ 
 
      $(this).fadeIn(100).text(number); 
 
      }) 
 
     } 
 
     
 
     else { 
 
     $(".number").slideUp(750,function(){ 
 
      $(this).slideDown(100).text(number); 
 
      }) 
 
     } 
 
     },2000) 
 
    } 
 
}) 
 
      
 
      

ul { 
 
    text-align: center; 
 
    border: 1px solid skyblue; 
 
    display: block; 
 
    width:500px; 
 
    height: 200px; 
 
    margin: 0 auto; 
 
} 
 
li { 
 
    display: inline-block; 
 
} 
 
h1 { 
 
    display: inline; 
 
    color: #fff; 
 
    text-shadow: 0px 0px 5px #000; 
 
    font-size: 50px; 
 
} 
 
div { 
 
    width: 100%; 
 
} 
 
.x { 
 
    width: 100%; 
 
    height: 100px; 
 
    margin-bottom: 20px; 
 
} 
 
.fa { 
 
    margin: 0 0 10px 10px; 
 
    cursor: pointer; 
 
} 
 
.fa-play { 
 
    color: skyblue; 
 
} 
 
.fa-pause { 
 
    color: red; 
 
} 
 
     

<ul> 
 
    <div> 
 
    <div class="x"><h1 class="number">0</h1></div> 
 
    <li class="fa fa-pause"></li> 
 
    <li class="fa fa-play"></li> 
 
    </div> 
 
    <li> 
 
    <input type="radio" name="style" class="t1" checked>Show/hide 
 
    </li> 
 
    <li> 
 
    <input type="radio" name="style" class="t2">Fadein/Fadeout 
 
    </li> 
 
    <li> 
 
    <input type="radio" name="style" class="t3">SlideUp/SlideDown 
 
    </li> 
 
</ul> 
 
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Answer 1

あなたはチェックしません。別のものを追加する前に確認してください。

function move() { 
    if(timer) clearInterval(timer); 
    ... 
}