为什么此setInterval调用不起作用？

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);
   ...
}