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);
};