为什么我的间隔只清了一半？答案

【问题标题】：Why is my interval clearing only halfway?为什么我的间隔只清了一半？
【发布时间】：2016-04-14 15:59:00
【问题描述】：

我一直在从事我的第一个主要编程项目，到目前为止进展顺利。我的目标是让动画一直运行到触发事件或 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
    }

当我运行不带星号线的代码时，整个过程都有效。汽车按照我的意愿运行，如果满足停止条件，它就会停止。汽车在画布上的原处冻结，似乎间隔被清除了。当我添加星号的代码行时，动画似乎可以工作，但它的运行速度是以前的两倍。我完全迷失了，我尝试的任何方法都不起作用。请帮忙。

【问题讨论】：

标签： javascript animation settimeout setinterval clearinterval

【解决方案1】：

问题可能是这里定义的局部变量：

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

变量Driving 只在函数startDrive 中定义，它是一个局部变量，因为您在函数内部使用var 来定义它。因此，当您尝试在 testLocation() 中访问它时，您访问的不是同一个变量。实际上，当您执行clearInterval(Driving) 时，变量Driving 没有定义。一个简单的解决方案是通过删除 var 来使 Driving 全局化：

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

或者您可以将计时器作为参数传递给testLocation 函数。这样，您将正确清除间隔。

【讨论】：