Question

嗨我在这个函数里面有一个ajax调用：

for(var i in data){
    setTimeout((function(i) {
         return function(){
            CreateMarker(data[i]);
         };
     })(i), i*500);
    }

它使用google.maps.Animation.DROP在Google地图中添加标记。我需要当所有标记都在地图中时，投影动画变为：setAnimation(google.maps.Animation.BOUNCE)，我知道如何更改动画。

这是我的问题：我知道ajax何时结束但由于超时我无法知道所有标记何时“掉落”到地图中，所以我不会提前更改动画。

我怎么知道如何知道所有标记何时放在地图中以便我可以更改动画？谢谢！

Answer 1

您可以简单地创建一个变量来计算放置的标记，并检查每个标记后是否完成。

var done = 0;

for(var i in data){
    setTimeout((function(i) {
        return function() {
            CreateMarker(data[i]);
            if (++done == data.length) {
                // execute code here
            }
        };
    })(i), i*500);
}

以下是包含随机数据的代码的工作示例：http://jsfiddle.net/S3LQK/

Answer 2

解决方案是在你的for：

之后添加另一个setTimeout

for(var i = 0; i<data.length; i++){ // assuming data is a contiguous array
  setTimeout((function(i) {
    return function(){
      CreateMarker(data[i]);
    };
  })(i), i*500);
}
setTimeout(changeAnimation, (i-1)*500);

changeAnimation函数将在最后一个CreateMarker之后执行。

我发现当事情定期重复时，用setTimeout代替setInterval会有很大帮助：

var interval = setInterval(function(){
  var markerData = data.shift(); // changes data, use a copy if you want to use data anywhere else
  if (markerData) CreateMarker(markerData);
  else { clearInterval(interval); changeAnimation() }
}, 500);

在这个简单的版本changeAnimation将在CreateMarker调用后500ms执行，但它可以很容易地更改后立即执行：

var interval = setInterval(function(){
  var markerData = data.shift();
  CreateMarker(markerData);
  if (!data.length){ clearInterval(interval); changeAnimation() }
}, 500);

Answer 3

您可以保留计时器的计数，以便了解最后一个计时器何时触发。

由于您没有显示变量data的类型，因此无论data是数组还是对象，此解决方案都将起作用（尽管通常不应使用{{1}迭代数组所以我认为它是一个对象。

for (var i in data)

当函数完成（包括setTimeout（s））调用函数时

3 个答案: