Как задать setTimeout для метода объекта?

Question

[Aleks Kirilov]

Всем здравствуйте, есть код:

var Car = function (x, y) {
            this.x = x;
            this.y = y;

            var carHtml = '<img src="http://nostarch.com/images/car.png">';

            carElement = $(carHtml);

            carElement.css({
               position: "absolute",
               left: x,
               top: y 
            });

            $("body").append(carElement);
        };

        Car.prototype.moveRight = function () {
            this.x += 5;

            this.carElement.css({
                left: this.x,
                top: this.y,
            });
        };

var tesla = new Car(20, 20);
        var nissan = new Car(100, 200);

Как помощью setInterval и moveRight анимировать nissan, чтобы
машина поехала от левой границы окна к правой?

Comments

[Модератор]

Aleks Kirilov дорогой пользователь, настоятельно рекомендуем еще раз обратить самое пристальное внимание на п. 3.1 регламента работы сервиса (и, в особенности, на его последний абзац). В противном случае, ваши вопросы будут удаляться по причине тег-спама, а систематические нарушения приведут к блокировке учетной записи.

[Дмитрий]

В чем именно затруднение?
https://www.w3schools.com/jsref/met_win_setinterval.asp

[Aleks Kirilov]

Затруднение в том что не работает так, сами попробуйте этот код использовать.

Answer 1

[RAX7]

Car.prototype.moveRight = function (dx) {
  this.x += 5;

  if (this.x < dx) {
    setTimeout(() => this.moveRight(dx), 16);
  } else {
    this.x = dx;
  }
  this.carElement.css({
    left: this.x,
    top: this.y
  });
};

var nissan = new Car(100, 200);
nissan.moveRight(500);

Comments

[Aleks Kirilov]

Классно придумал!

[Aleks Kirilov]

А как без стрелочной функции, а обычной?

[RAX7]

Aleks Kirilov,

Car.prototype.moveRight = function (dx) {
  this.x += 5;

  if (this.x < dx) {
    var that = this;
    setTimeout(function() {
      that.moveRight(dx);
    }, 16);
  } else {
    this.x = dx;
  }
  this.carElement.css({
    left: this.x,
    top: this.y
  });
};