1

Тут код

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

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

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

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

1 ответ 1

0

Нажатая кнопка генерит множественные события 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);
    }
  },

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.