0

I'm trying to run a 'Car' object method across the browser window with 'setInterval' but it only work once. What's the problem of my code? Also, I am confused if we put the function in setInterval with parenthesis or without it?

Here is my code:

var Car = function(x, y) {
  this.x = x;
  this.y = y;
  //   drawing in constructor
  this.draw();
};
Car.prototype.draw = function() {
  var carhtml =
    '<img src="https://www.pngitem.com/pimgs/m/195-1953962_vector-vintage-classic-car-free-hd-image-clipart.png">';

  this.carElement = $(carhtml);
  this.carElement.css({
    position: "absolute",
    left: this.x,
    top: this.y,
    width: 400,
  });
  $("body").append(this.carElement);
};
Car.prototype.moveRight = function() {
  this.x += 10;
  this.carElement.css({
    left: this.x,
    top: this.y,
  });
};
var classicCar = new Car(0, 100);
setInterval(classicCar.moveRight, 1000);
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
Hy Lai
  • 1
  • 1
    https://developer.mozilla.org/en-US/docs/Web/API/setInterval#the_this_problem – Teemu Jan 03 '22 at 09:37
  • 2
    Hello there Hy Lai. Welcome to StackOverflow. Your code is working perfectly. The car Object simply moves off the right-hand side of the screen and keeps going! If this is not what you want please edit your question to explain exactly what you would like to happen. – Brian Peacock Jan 03 '22 at 09:39
  • @BrianPeacock The code gives error due to `this` not being what OP thinks it is – mplungjan Jan 03 '22 at 09:43
  • @mplungjan Which `this` do you mention? – Hy Lai Jan 03 '22 at 09:49

1 Answers1

2

You are losing the reference to the this variable. Bind it to the object

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

shidoro
  • 362
  • 4
  • 9