ehsan ehsan - 14 days ago 10
Javascript Question

Why does this setInterval call not work?

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

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

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