我一直致力于我的第一个主要编程项目,到目前为止它一直很顺利.我的目标是动画运行,直到事件被触发或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
}
当我运行没有星号线的代码时,整个过程都有效.如果满足停车的条件,汽车就会按照我的要求进行动画制作并停止.汽车冻结在画布上的位置,似乎间隔被清除了.当我添加带星号的代码行时,动画似乎可以工作,但它的运行速度是以前的两倍.我完全迷失了,没有尝试过.请帮忙.
解决方法:
问题可能是由于此处定义的局部变量:
function startDrive() {
var Driving = setInterval(carDriving, aniSpeed);
}
变量Driving仅在函数startDrive中定义,它是一个局部变量,因为您使用var在函数内定义它.因此,当您尝试在testLocation()内部访问它时,您不会访问同一个变量.实际上,当您执行clearInterval(Driving)时,未定义变量Driving.一个简单的解决方案是通过删除var来实现Driving全局:
function startDrive() {
Driving = setInterval(carDriving, aniSpeed);
}
或者您可以将计时器作为testLocation函数内的参数传递.这样您就可以正确清除间隔.