Why does this setInterval call not work?

Question

Questions:

1. why when change input radio dont work pause?

2. why when change input radio , run function move() before than 2 seconds?

This is my code :

$(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

You do not check if the interval was added before adding another one. Check before adding another one.

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