Почему не удаляются интервалы clearInterval()?

161

28 апреля 2018, 18:03

Тут код

В эдиторе кода над результатом есть кнопка показать в отдельном окне. нажмите, так будет всё виднее и понятнее. (+ в эдиторе анимация иногда лагает)

Итак, тут всё просто: есть 3д куб. Крутить его можно с помощью нумпада. (2, 4, 8, 6). Если зажать кнопку (onkeydown) - запускается интервал, который постоянно меняет rotateY и rotateX куба. Как только кнопка отпускается (onkeyup) - интервал удаляется с помощью функции clearInterval(). Если держать кнопку чуть больше секунды - анимация зависает, начинает дергаться как чёрт и не может остановиться, когда кнопку отпустили. То же самое происходит, если зажать хоть на мгновение 2 кнопки сразу.

Вероятнее всего я просто не до конца понимаю, как работают интервалы или событие onkeydown.

Подскажите, как это исправить?

Answer 1

Нажатая кнопка генерит множественные события onkeydown. Это первое.

Второе. Код, который использует одну и ту же переменную для многократного создания таймеров, должен обнулять эту переменную после вызова clearInterval, чтобы иметь возможность в любой момент выяснить, запущен какой-нибудь таймер или нет.

window.onkeyup = function() {
  clearInterval(interval);
  interval = null;
}
var rotate = {
  right: function() {
    if (!interval) {
      interval = setInterval(function() {
        rotateY += 2;
        document.querySelector(".cube").style.transform = "rotateX(" + rotateX + "deg) rotateY(" + rotateY + "deg)";
      }, 10);
    }
  },