I am working on my first major programming project, and so far everything is going well. My goal is to run the animation until an event occurs or 15 seconds pass. After the animation ends, I want the animation to repeat. My current plan decision is shown below.
var animationSpeed = 40;
var animationTimout = 375;
var testTime = 1;
function onClick() {
startDrive();
setTimeout(startDrive, 15000);
}
function startDrive() {
var Driving = setInterval(carDriving, aniSpeed);
}
function carDriving() {
testLocation();
drawCar();
angleCalc();
newLocation();
getInfo();
}
function testLocation() {
testTime = testTime + 1
if(a === 1 || testTime > animationTimeout) {
clearInterval(Driving);
}
}
function drawCar() {
}
function angleCalc() {
}
function newLocation() {
}
function getInfo() {
}
When I run the code without a highlighted line, everything works. The car comes to life as I want, and stops if the conditions for stopping are met. The machine freezes where it was on the canvas, and it seems that the interval has been cleared. When I add a highlighted line of code, the animation seems to work, but it works twice as fast as before. I am completely lost and do not try to work anything. Please, help.