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

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

1 个答案: