javascript - 如何动画绘制一系列线段

Question

我想画一个点，大约 1 秒后我想画下一个点。这是否可能:

我已经试过了:

function simulate(i) {
  setTimeout(function() { drawPoint(vis,i,i); }, 1000);
}

for (var i = 1; i <= 200; ++i)
  simulate(i);

function drawPoint(vis,x,y){
  var svg = vis.append("circle")
    .attr("cx", function(d) {
      console.log(x);
      return 700/2+x;
    })
    .attr("cy", function(d) {
      return 700/2+y;
    })
   .attr("r", function(d) {
     console.log(x);
     return 6;
   });
}

不幸的是，这是行不通的。它只是立即绘制整条线。

Answer 1

这是行不通的，因为 for 循环将立即运行到结束，setTimeouts 将被同时调度，所有函数将同时触发。

取而代之的是，这样做:

var i = 1;
(function loop(){
    if(i++ > 200) return;
    setTimeout(function(){
        drawPoint(vis,i,i); 
        loop()
    }, 1000)
})();

解释:

这个 IIFE 将在 i = 1 时第一次运行。然后，if 增加 i(执行 i++)并检查它是否大于 200。如果是，函数 循环 返回。如果不是，则安排 setTimeout，它再次调用 drawnPoint 和函数 loop。