Question

我已将10个引脚添加到我的地图中：

for(i=0;i<10;i++){
    markers[i] = new google.maps.Marker({
        position: {lat: my_lat[i], lng: my_lat[i]}
    });
}

现在我想以非常精确的间隔在地图上显示这些标记。使用setInterval和setTimeout会产生0到4毫秒之间的错误。

performance.now()似乎非常精确。我构建的计时器在控制台中打印经过的时间，误差小于1毫秒。（这太好了！）

然而，问题是标记仅在for循环的末尾绘制，一次全部绘制。有没有办法确保我逐个绘制它们？

这是绘图代码：

for (i=0;i<10;i++){
      var t0 = performance.now();
      var dt = 0;

      while (dt<1000){
          dt = performance.now() - t0;
      }
      markers[i].setMap(map);
      console.log(dt);
}

Answer 1

我找到了解决方案。要使用setTimeouts而不是for循环：

        var s = 0;
        setTimeout(function(){
          console.log("start " + performance.now());
          setTimeout(tim, 0);
        }, 1000);

        function tim(){
          var t0 = performance.now();
          var dt = 0;

          while (dt<interval[s]){
            dt = performance.now() - t0;
          }   
          markers[s].setMap(map);
          console.log(dt);
          s++;
          setTimeout(tim, 0);
        }

谷歌地图标记与Javascript自定义精确计时器使用Performance.now（）

1 个答案: