Phantomjs,Casperjs重要的概念:执行顺序

简介: <div class="markdown_views"><h2 id="phantomjscasperjs重要的概念执行顺序">Phantomjs,Casperjs重要的概念:执行顺序</h2><p>Phantomjs和Javascript一样,是基于消息驱动的。代码的执行都是异步化的。 <br>要理解phantomjs的代码执行是基于一个step栈。在执行脚本时,会将

Phantomjs,Casperjs重要的概念:执行顺序

Phantomjs和Javascript一样,是基于消息驱动的。代码的执行都是异步化的。
要理解phantomjs的代码执行是基于一个step栈。在执行脚本时,会将所有step压入栈。
wait,then,open,等这些都是一个step。
举几个例子:

casper.wait(1000,function() {
    do1
}
do2
AI 代码解读

do1和do2执行顺序是怎么样的?
wait方法是异步的!!!,do2会先执行!!!,为了让do1和do2顺序执行,必须这样:

casper.wait(1000,function() {
    do1
}
casper.then(function() {
    do2
}
AI 代码解读

wait方法先被压入step栈,然后then被压入栈。

讨论下then的用法

then() 方法将一个新的step压入栈,一个step是一个javascript的函数:
1. 等待前一个step完成后执行
2. 等待页面请求的url或其他page加载

来看一段代码:

var casper = require('casper').create();

casper.start();

casper.then(function step1() {
    this.echo('this is step one');
});

casper.then(function step2() {
    this.echo('this is step two');
});

casper.thenOpen('http://google.com/', function step3() {
    this.echo('this is step 3 (google.com is loaded)');
});

casper.run();
AI 代码解读

可以将steps栈打印出来方便调试:

require('utils').dump(casper.steps.map(function(step) {
    return step.toString();
}));
AI 代码解读

可以看到栈信息是这样的:

$ casperjs test-steps.js
[
    "function step1() { this.echo('this is step one'); }",
    "function step2() { this.echo('this is step two'); }",
    "function _step() { this.open(location, settings); }",
    "function step3() { this.echo('this is step 3 (google.com is loaded)'); }"
]
AI 代码解读

栈信息里,有一个_step(),这个是phantomjs自动帮我们加的,用于加载google.com这个url,然后step3才能执行。
栈里的step,必须在调用run后才真正开始执行。

递归的step

如果一个step内部有多个step,会怎么样?代码大概是这样:

casper.then(function() {
    casper.then(function() {
        do1
        casper.then(function() {
            do2
        })
        do3
    })
    do4
)

casper.then(function() {
    do5
})
一个step内部递归的step,在运行时,会动态压入所在step的内部栈。所以,执行顺序是:do4,do1,do3,do2,do4
AI 代码解读

非异步的方法

在sendAjax的时候,将asyn参数设为false,就可以正常执行,得到返回值result,否则是空

 var result = this.evaluate(function () {
    return __utils__.sendAJAX(url, 'GET', null, false,
        {
            contentType: 'application/x-www-form-urlencoded; charset=UTF-8'
        });
}, {url: url});
AI 代码解读

重大坑

exit()方法是异步的,也就是说,step1中调用exit,step2也有可能执行。

目录
打赏
0
0
0
0
3
分享
相关文章
深入理解JavaScript中的闭包:原理、应用与代码演示
【10月更文挑战第12天】深入理解JavaScript中的闭包:原理、应用与代码演示
Django 视图探秘:FBV与CBV注册方式的异同,揭秘as_view()的执行魔法
Django 视图探秘:FBV与CBV注册方式的异同,揭秘as_view()的执行魔法
带你读《现代Javascript高级教程》十、JavaScript引擎的工作原理:代码解析与执行(1)
带你读《现代Javascript高级教程》十、JavaScript引擎的工作原理:代码解析与执行(1)
108 0
带你读《现代Javascript高级教程》十、JavaScript引擎的工作原理:代码解析与执行(2)
带你读《现代Javascript高级教程》十、JavaScript引擎的工作原理:代码解析与执行(2)
📕 重学JavaScript:如何实现一个`call`/`apply`?
这次要说的 call/apply 方法其实和 bind 极其类似。
92 0
webpack原理篇(五十九):loader 的链式调用与执行顺序
webpack原理篇(五十九):loader 的链式调用与执行顺序
308 0
webpack原理篇(五十九):loader 的链式调用与执行顺序
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等