Почему мой интервал очистки только на полпути?

Question

Я работаю над своим первым крупным проектом по программированию, и до сих пор он прошел очень хорошо. Моя цель - запустить анимацию до тех пор, пока не произойдет какое-либо событие или не пройдет 15 секунд. После окончания анимации я хочу, чтобы анимация повторялась. Мое текущее решение плана показано ниже.

var animationSpeed = 40; 
    var animationTimout = 375; 
    var testTime = 1; 
    //some more set up variables 

    function onClick() { 
     startDrive(); 
     setTimeout(startDrive, 15000); //**** 
    } 

    function startDrive() { 
     var Driving = setInterval(carDriving, aniSpeed); 
    } 

    function carDriving() { 
     testLocation(); 
     drawCar(); 
     angleCalc(); 
     newLocation(); 
     getInfo(); 
    } 

    function testLocation() { 
     //this code gets information on whether or not the animation should be stopped 
     testTime = testTime + 1 

     if(a === 1 || testTime > animationTimeout) { 
      //a test to cancel the animation, the other variables test to 
      clearInterval(Driving); 
     } 
    } 

    function drawCar() { 
     //draws the car 
    } 

    function angleCalc() { 
     //gets some info on how to move the car 
    } 

    function newLocation() { 
     //decides on new coords for the car based on angleCalc(); 
    } 

    function getInfo() { 
     //gets some info I plan to use later in the project 
    } 

Когда я запускаю код без выделенной строки, все работает. Автомобиль оживляет, как я хочу, и останавливается, если условия для остановки выполняются. Машина зависает там, где она была на холсте, и кажется, что интервал был очищен. Когда я добавляю выделенную строку кода, анимация, похоже, работает, но она работает в два раза быстрее, чем раньше. Я совершенно потерян, и ничего не пытаюсь работать. Пожалуйста помоги.

Answer 1

Проблема, скорее всего, связано с локальной переменной, определенной здесь:

function startDrive() { 
    var Driving = setInterval(carDriving, aniSpeed); 
} 

переменная Driving определяется только в функции startDrive, это локальная переменная, потому что вы используете var определить его внутри функции. Поэтому, когда вы пытаетесь получить к нему доступ в testLocation(), вы не получаете доступ к одной и той же переменной. Фактически, когда вы делаете clearInterval(Driving), переменная Driving не определена. Простое решение было бы сделать Driving глобального удаления var:

function startDrive() { 
    Driving = setInterval(carDriving, aniSpeed); 
} 

Или вы можете передать таймер в качестве параметра внутри функций testLocation. Таким образом вы будете правильно очищать интервал.