Почему не отрабатывает SetInterval?

Question

Имеется простенький код:

var Car = function (x, y) {
        this.x = x;
        this.y = y;
     }
     Car.prototype.draw = function () {
        var carHTML = '<img src="img/car.png">';
        this.carJq = $(carHTML);

        this.carJq.css({
           position: "absolute",
           top: this.y,
           left: this.x
        })

        $("body").append(this.carJq);
     }
     Car.prototype.moveRight = function () {
        this.x += 5;
        
        this.carJq.css({
           left: this.x,
           top: this.y
        })
     }
     
     var tesla = new Car(10, 20);
     var nissan = new Car(100, 200);
     nissan.draw();
     tesla.draw();
     setInterval(nissan.moveRight, 1000);

С помощью прототипов добавил метод движения вправо для машин. Потом пытаюсь вызвать setInterval для nissan. Если в SetInterval передаю nissan.MoveRight(), то отрабатывает только один раз, если просто nissan.MoveRight, то вообще ни разу. Что не так? Уже голову сломал себе. p.s. до этого момента всё работает прекрасно!

Answer 1

setInterval(nissan.moveRight.bind(nissan), 1000);

setInterval(function() { nissan.moveRight(); }, 1000);

Answer 2

Зачем вам jquery в 2021 году то?

class Car {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.$car = new Image();
  }

  draw() {
    document.body.append(this.$car);
    this.$car.src = 'img/car.png';
    this.$car.alt = 'Car';
    this.$car.style.position = `absolute`;
    this.$car.style.top = `${this.y}px`;
    this.$car.style.left = `${this.x}px`;
  }

  moveRight() {
    this.x += 5;
    this.$car.style.left = `${this.x}px`;
  }
}

const tesla = new Car(10, 20);
const nissan = new Car(100, 200);
nissan.draw();
tesla.draw();
setInterval(() => nissan.moveRight(), 1000);

img {
  border: 1px solid purple;
  display: inline-block;
  padding: .2rem;
}

БЛОГ НА HUSL

Почему не отрабатывает SetInterval?

Ответы (2 шт):