PhantomJS时间表截图重复相同的图像

Question

我试图做一个测试，从这个动画制作截图时间表：http://bl.ocks.org/mbostock/1136236

这是代码，我正在努力产生截图和平。问题是所有的截图都是相同的，只是动画的拳头动作。每个屏幕截图都应代表动画的下一个动作。

当我尝试使用page.reload（）时，第一个截图可以工作，但其余的只是黑色。

var doTimeOut = function(i){ 
    window.setTimeout(function(){ 
     // page.reload(); 
     pageData = page.evaluate(function(){ 
      return document; 
     }); 
     page.render('screenshot'+i+'.png'); 
    },300); 
} 

for (var i = 0; i < 200; i++) { 
    doTimeOut(i); 
}; 

我的方法有什么问题？是否有可能做我想要的？

Answer 1

由于javascript的异步性质，doTimeOut的所有调用都在同一时间发生 - 程序不会等待一个doTimeout完成，它将启动200个将在300毫秒内调用的回调。

为了避免重大改写，你可以通过增加超时每个回路安排的回调：

var doTimeOut = function(i){ 
    window.setTimeout(function(){ 
     pageData = page.evaluate(function(){ 
      return document; 
     }); 
     page.render('screenshot'+i+'.png'); 
    }, 300 * i); // <---- HERE 
} 

for (var i = 0; i < 200; i++) { 
    doTimeOut(i); 
};