Question

我有关于幻影和定时器的问题。似乎网页中的计时器与pahntomjs中的时间同步，因此你无法创建漂亮的gif，它将显示漂亮的网站动画（动画总是使用时间）。

以下是说明问题的代码：

test.phantom.js

var page = new WebPage();
page.open("test.html", function(){
    var i = 0
    setInterval(function(){
            page.render('test-capture/'+i+'.gif', {format : "gif"});            
            i++;
            if(i == 20)
                    phantom.exit();
    }, 20);             
});

test.html

<!doctype html>
<html>
    <script>
var div;
window.onload = function(){
    div = document.getElementById("t");
    var times = 0;  
    setInterval(function(){
        div.innerHTML = "" + (++times);
    }, 1)
}
    </script>

    <body>          
    <div id="t">
    0
    </div>  
    </body>
</html>

正如您所见，phantomjs每20毫秒触发一次渲染调用，而网页每毫秒更改div#t的内容。您可能希望在生成的20张图像中，div#t的内容将以20的步长发生变化，但这种情况不会发生。我没有足够的声誉来发布图片，但div#t中的内容正在以1毫秒的步长发生变化。

这是一个错误还是会发生这样的事情？提前谢谢。

Answer 1

这是因为即使您拥有页面上下文和外部上下文，javascript执行也是单线程的。第二件事是渲染（gif）并不便宜。在我的机器上，平均渲染gif需要大约100毫秒。在此期间，没有javascript可以执行，时间停滞不前。

因此，当渲染完成后，两个计时器都可以继续运行。所以公式是：

var pageContextAdvancement = Math.max(outsideIntervalDuration - timeToRender, 1);

所以，不能用PhantomJS动画一些东西。它不是正确的工具。

至少在我的机器上，以下似乎可行，但如果工作负载发生变化，这可能会改变。

page.open("test.html", function(){
    var i = 0
    function run(){
        page.render('test/'+i+'.gif', {format : "gif"});
        i++;
        if(i == 20)
            phantom.exit();
        setTimeout(run, 200);
    }
    setTimeout(run, 170);
});

网页中的计时器与phantomjs中的时间同步

1 个答案: