Я пытаюсь создать два счетчика, когда я нажимаю downKey, я хочу, чтобы counter1 начал считать, а когда я нажимаю keyLeft, я хочу остановить первый счетчик и запустить counter2 .... Я знаю, что мне нужно использовать функцию clearInterval(), но я не знаю, где мне это нужно, вот < сильный > JSFiddle чтобы понять, что я имею в виду

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();
});
0
elreeda 17 Дек 2015 в 13:31

3 ответа

Лучший ответ

Вам нужно объявить down_move и right_move вне 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();
});
4
jcubic 17 Дек 2015 в 10:38

Вы должны хранить вне функции интервал до остановки.
Внимание, код ascii слева - 37.

Вот JSFiddle, чтобы увидеть мои изменения:

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>
0
Oscar Talamo 17 Дек 2015 в 11:32

Это похоже на проблему сферой, вот как я бы это сделал: обновленная скрипка

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();
});
0
amarch 17 Дек 2015 в 11:04