javascript - PNG 未使用 PhantomJS 在循环中多次尝试渲染

Question

var page = require('webpage').create();
var filepath = "/home/abc/" + "abc.html"; //create path to charts.html    
for (i = 0; i < 3; i++) { // make three attempts
    console.log("hi")
    page.open(filepath, function(status) {
      console.log(status);
      //if(status !== 'success') { //if not success, make another attempt
//        continue;
  //    }

      page.render('abc.png');
      phantom.exit();
    });
}    
phantom.exit();

像这样运行这段代码:

$ phantomjs hello.js

问题 1:我希望在我的主目录中生成 abc.png。但是，使用当前代码不会生成它。

Q2:添加注释掉的if block back导致代码执行卡住。为什么会这样？

Answer 1

你有三个相互交织的问题。

1。 继续

continue 用于转到循环结构的下一次迭代，例如 for 或 while。那不是你在这里做的。在局部范围内没有围绕 continue 的循环，这意味着这是一个语法错误。

PhantomJS 2 中有一个错误，它不再显示语法错误并且只是卡住。运行您最喜欢的 linter(jslint、jshint、eslint)以防止此类错误。

2。 page.open()是异步的

您不能使用循环一个接一个地打开多个页面。 page.open() 是异步的。通过调用它，您只需启动加载。由于它不会在下一次迭代中阻塞，您将用新的 URL 覆盖请求，并且第一个请求将永远不会完成，因为 for 循环比页面请求快得多。

唯一可能加载的页面是最后一页，但是......

3。提前退出

你退出得太早了。由于 page.open() 是异步的，因此循环将完全运行，甚至不会完全加载一页。最后你有一个 phantom.exit() 会立即退出 PhantomJS。

---

如果您必须打开一堆页面，请使用递归方法或巧妙地使用 setTimeout()。您也可以使用 async's series() 函数以更理智的方式编写它。

作为简单递归函数的示例:

var page = require('webpage').create();
var filepath = "/home/abc/" + "abc.html"; //create path to charts.html    
function run(i){
    if (i <= 0) {
      return phantom.exit();
    }
    page.open(filepath, function(status) {
      console.log(status);
      if(status === 'success') { //if not success, make another attempt
        page.render('abc'+i+'.png');
      }
      run(i-1);
    });
}
run(3);