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>You are losing the reference to the this variable. Bind it to the object
setInterval(classicCar.moveRight.bind(classicCar), 1000);