CODEWITHSUNDEEP
javascriptjquerysetintervalclearinterval
Hello World
Hello World

Reputation: 371

setInterval and clearInterval issues?

$("#down").click(function(){ 
  $("#move").animate({top:'+=75px'}, 160, 'linear')
  });
$("#up").click(function(){ 
  $("#move").animate({top:'-=75px'}, 160, 'linear')
  });
function game(){
    var a = [0,10,15,20,25,35,40,45,50,55,62];
    var b = Math.floor(Math.random() * a.length);
    var c = a[b];
    $("#box").animate({right: '+=100%'}, 1000, 'linear');
    $("#box").animate({right: '-=100%'}, 10);
    $("#box").animate({top: c+'%'}, 0);    
};

var timer;
$("#start").on('click', function(){timer = setInterval(game,1000)})
$("#stop").on('click', function(){clearInterval(timer)})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
  <style>
    .move {
      border: 1px solid black;
      position: absolute;
      left: 50px; top: 40%;
      height: 40px; width: 40px;
      background-color: rgb(0,255,100);      
    }
    .box {
      border: 1px solid black;
      position: absolute;
      right: 0%; top: 26%;
      height: 38%; width: 2.2%;
      background-color: red
    }
  </style>
</head>
<body>

<div id = everything class = everything>
  <div class = move id = move></div>
  <div class = box id = box></div>
  <button id = start>Start</button>
  <button id = stop>Stop</button>
  <button id = down>DOWN</button>
  <button id = up>UP</button>
</div>

I'm having issues with this timer I'm using to build a simple game. The function I'm trying to loop is function game(), which makes the div "box", initialized at the far right of the screen, animate all the way to the left of the screen, then immediately back to the far right. Essentially, it creates the illusion of obstacles coming towards the player. Clicking button "start" sets the interval. Clicking "stop" should clear it.

If I want to set the period of the interval, I know I have to change the second value in setInterval(game, x), but when I give a value x, only the first instance is delayed by that amount, then the function loops without delay. What is wrong with my function or the execution of setInterval? Do you have any suggestions for improving my method of accomplishing the above goal?

Also, my clearInterval(timer) only works sometimes, mostly when the period of the interval is long. Is there simply too much going on in the function and the program can't handle clearing the interval on a short period? Thanks for your help.

Upvotes: 0

Views: 103

Answers (1)

Yogen Darji
Yogen Darji

Reputation: 3300

I would suggest to use requestAnimationFrame still find below answer for your issue

1) Use $().finish() to stop animation with smaller interval.

2) Also use clearInterval(timer) in your start as if you click start multiple times.

$("#down").click(function(){ 
  $("#move").animate({top:'+=75px'}, 160, 'linear')
  });
$("#up").click(function(){ 
  $("#move").animate({top:'-=75px'}, 160, 'linear')
  });
function game(){
    var a = [0,10,15,20,25,35,40,45,50,55,62];
    var b = Math.floor(Math.random() * a.length);
    var c = a[b];
    $("#box").animate({right: '+=100%'}, 1000, 'linear');
    $("#box").animate({right: '-=100%'}, 10);
    $("#box").animate({top: c+'%'}, 0);    
};

var timer;
$("#start").on('click', function(){game();clearInterval(timer); timer = setInterval(game,1000)})
$("#stop").on('click', function(){
 $("#box").finish();
clearInterval(timer)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
  <style>
    .move {
      border: 1px solid black;
      position: absolute;
      left: 50px; top: 40%;
      height: 40px; width: 40px;
      background-color: rgb(0,255,100);      
    }
    .box {
      border: 1px solid black;
      position: absolute;
      right: 0%; top: 26%;
      height: 38%; width: 2.2%;
      background-color: red
    }
  </style>
</head>
<body>

<div id = everything class = everything>
  <div class = move id = move></div>
  <div class = box id = box></div>
  <button id = start>Start</button>
  <button id = stop>Stop</button>
  <button id = down>DOWN</button>
  <button id = up>UP</button>
</div>

Upvotes: 1

Related Questions