CODEWITHSUNDEEP
javascriptjquery
elreeda
elreeda

Reputation: 4597

Jquery: count using setInterval

Im trying to create two counter when I press downKey I want to counter1 start counting and when I press keyLeft I want to stop the first counter and start counter2 .... I know that I need to use clearInterval() function but I dont know where I need to use it, here is a JSFiddle to see what I mean

html:

<div id="left"></div>
<div id="down"></div>

js:

$('body').keydown(function (e) {
  switch (e.which) {
    case 39:
      clearInterval(down_move);
      var i=0;
      var right_move = setInterval(function(){
        $('#left').html(i);
        i++
      }, 1000)
      break;
    case 40:
      clearInterval(right_move);
      var j = 0;
      var down_move = setInterval(function(){
        $('#down').html(j)
                j++;
      }, 1000);
      break;
    default:

  }
  e.preventDefault();
});

Upvotes: 0

Views: 259

Answers (3)

Oscar Talamo
Oscar Talamo

Reputation: 1

You have to store outside of function the interval to stop.
Warning the ascii code of left is 37.

Here is a JSFiddle to see my change:

var storeInterval = null;
$('body').keydown(function (e) {
  switch (e.which) {
    case 37:
      clearInterval(storeInterval);
      var i=0;
      storeInterval = setInterval(function(){
        $('#left').html(i);
        i++
      }, 1000)
      break;
    case 40:
      clearInterval(storeInterval);
      var j = 0;
      storeInterval = setInterval(function(){
        $('#down').html(j)
				j++;
      }, 1000);
      break;
    default:

  }
  e.preventDefault();
});
<div id="left"></div>
<div id="down"></div>

Upvotes: 0

amarch
amarch

Reputation: 1

it seems like a scope issue, here is how I would make it: updated fiddle

var Interval = function(intervalFunc, selector){
  var interval;
  this.start = function(){
    interval = setInterval(intervalFunc, 1000);
  },
  this.stop = function(){
    clearInterval(interval);
  }
}

var i = 0;
var rightBtnInterval = new Interval(function downInterval(){
        $('#right').html(i)
                i++;
      });

var j = 0;
var downBtnInterval = new Interval(function downInterval(){
        $('#down').html(j)
                j++;
      });



$('body').keydown(function (e) {
  switch (e.which) {
    case 39:
      rightBtnInterval.stop();
      downBtnInterval.start();
      break;
    case 40:
      downBtnInterval.stop();
      rightBtnInterval.start();
      break;
    default:

  }
  e.preventDefault();
});

Upvotes: 0

jcubic
jcubic

Reputation: 66560

You need to declare down_move and right_move outside of keydown:

var right_move, down_move;
$('body').keydown(function (e) {
  switch (e.which) {
    case 39:
      clearInterval(down_move);
      var i=0;
      right_move = setInterval(function(){
        $('#left').html(i);
        i++
      }, 1000)
      break;
    case 40:
      clearInterval(right_move);
      var j = 0;
      down_move = setInterval(function(){
        $('#down').html(j)
                j++;
      }, 1000);
      break;
    default:

  }
  e.preventDefault();
});

Upvotes: 4

Related Questions