这里的逻辑有什么问题
What's wrong with the logic here?
我目前正在使用Google Maps V3 API,我正在为一个标记制作动画,以沿着预定的路线行驶。路线信息存储在两个单独的数组中,lat
用于纬度坐标,lon
用于经度坐标。我在尝试构建按钮以暂停和恢复标记的移动时遇到逻辑问题。这是代码:
var paused = 0; //paused state
var interval = 1000; //interval for animation (ms)
function clickPause() {
paused = 1;
}
function clickPlay() {
paused = 0;
}
function moveToStep(yourmarker,yourroute,c) {
var LatLon;
var time;
var hours;
var minutes;
var seconds;
var finalTime;
var stopTime;
if (yourroute.length > c) {
LatLon = new google.maps.LatLng(lat[c],lon[c]);
yourmarker.setPosition(LatLon);
document.getElementById("currlat").innerHTML = lat[c];
document.getElementById("currlon").innerHTML = lon[c];
document.getElementById("currtime").innerHTML = c+1;
hours = 7+Math.floor((c+1)/3600);
minutes = Math.floor((c+1)/60);
seconds = (c+1)-minutes*60;
if(minutes == 60) {
minutes = 0;
}
finalTime = str_pad_left(hours,'0',2)+':'+str_pad_left(minutes,'0',2)+':'+str_pad_left(seconds,'0',2);
document.getElementById("finaltime").innerHTML = finalTime;
if(paused == 1) {
stopTime = c+1;
window.setInterval(function(){
if(paused == 0) {
moveToStep(yourmarker,yourroute,stopTime);
}
},interval);
}
else {
window.setTimeout(function(){
moveToStep(yourmarker,yourroute,c+1);
},interval);
}
}
}
function str_pad_left(string,pad,length) {
return (new Array(length+1).join(pad)+string).slice(-length);
}
function jumpTo(value) {
alert(value);
moveToStep(marker,lat,100);
}
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(31.26,121.45),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var marker = new google.maps.Marker({map: map,});
var newLatLng = new google.maps.LatLng(lat[0],lon[0]);
marker.setPosition(newLatLng);
moveToStep(marker,lat,0);
}
现在,我有两个按钮,一个调用clickPause()
函数,另一个调用clickPlay()
函数。暂停工作正常,但是当我尝试恢复时,标记表现出一些非常奇怪的行为。
从本质上讲,标记似乎跳回到上次暂停的位置,然后再次快速向前跳跃,并在每次标记位置更新时执行此操作(每 1000 毫秒一次,或每秒一次,由 interval
变量设置)。
以前有人见过这种行为吗?我不明白我的逻辑在这些行中有什么问题,我敢肯定这是罪魁祸首:
if(paused == 1) {
stopTime = c+1;
window.setInterval(function(){
if(paused == 0) {
moveToStep(yourmarker,yourroute,stopTime);
}
},interval);
}
else {
window.setTimeout(function(){
moveToStep(yourmarker,yourroute,c+1);
},interval);
}
我所做的只是检查模拟是否暂停,如果是,请检查它是否已取消暂停,然后一旦暂停,恢复标记的移动。一旦我按下恢复按钮,代码应该直接转到
window.setTimeout(function(){
moveToStep(yourmarker,yourroute,c+1);
},interval);
因为paused
的值已返回给1
。
谁能帮我?
您需要清除间隔,以便在恢复后阻止它触发。这意味着您需要存储 setInterval
返回的标识符,并在需要时将其传递给clearInterval
。
var pauseInterval; // interval identifier (outside the moveToStep function)
if (paused == 1) {
stopTime = c+1;
pauseInterval = setInterval(function() {
if(paused == 0) {
moveToStep(yourmarker, yourroute, stopTime);
}
}, interval);
} else {
clearInterval(pauseInterval);
setTimeout(function() {
moveToStep(yourmarker, yourroute, c+1);
}, interval);
}
相关文章:
- 我不知道我的编码有什么问题.(JavaScript)
- 我的流星路线出了什么问题
- 此nodeValue替换代码有什么问题
- 这个正则表达式的日期/时间有什么问题
- 我的CSS/Javascript下拉菜单测试代码出了什么问题
- 这个代码出了什么问题?(Jquery)
- 下面的Reg表达式出了什么问题
- 鼠标事件,我的代码出了什么问题
- 这个javascript语法有什么问题
- 动态创建foreignGroup并将其添加到svg中有什么问题
- 此代码中动态生成选择框有什么问题
- 我的javascript有什么问题?.className
- 这个 ajax.js 代码有什么问题
- JS代码有什么问题,让我知道代码是否可以改进
- 我的 Browserify JavaScript 代码有什么问题
- 图像上传功能将++(+1)副本添加到下一次上传.出了什么问题或如何重置“选定图像”
- 使用 Javascript 动态删除行.我的代码有什么问题
- AngularJS:这个注入我的控制器有什么问题
- 这个jQuery if语句有什么问题
- JavaScript:有人能告诉我我的代码出了什么问题吗?