Question

我有以下代码：

casper.then(function(){

    for (siteID = 1 ; siteID < 10; siteID++) {

        casper.then(function(){

            this.fill('form#form1', {'txtSiteName' : siteID }, true);

        });

        casper.then(function(){

            this.click('#BtnSiteSearch');
            this.wait('500');

        });

        casper.then(function(){

            this.echo("Longitude: " + this.fetchText('#pnlSiteDetail > fieldset > table > tbody > tr:nth-child(2) > td:nth-child(2)'));
            this.echo("Latitude: " + this.fetchText('#pnlSiteDetail > fieldset > table > tbody > tr:nth-child(3) > td:nth-child(2)'));
            this.echo("City: " + this.fetchText('#pnlSiteDetail > fieldset > table > tbody > tr:nth-child(5) > td:nth-child(2)'));
            this.echo("Area: " + this.fetchText('#pnlSiteDetail > fieldset > table > tbody > tr:nth-child(7) > td:nth-child(2)'));
            this.echo("Address: " + this.fetchText('#pnlSiteDetail > fieldset > table > tbody > tr:nth-child(9) > td:nth-child(2)'));
            this.echo("Access: " + this.fetchText('#pnlSiteDetail > fieldset > table > tbody > tr:nth-child(10) > td:nth-child(2)'));
            this.echo("H&S: " + this.fetchText('#pnlSiteDetail > fieldset > table > tbody > tr:nth-child(13) > td:nth-child(2)'));
            this.echo("Engineers: " + this.fetchText('#pnlSiteDetail > fieldset > table > tbody > tr:nth-child(14) > td:nth-child(2)'));
            this.echo("Owner: " + this.fetchText('#pnlSiteDetail > fieldset > table > tbody > tr:nth-child(8) > td:nth-child(2)'));

            this.capture('test' + siteID + '.png');

        });

    }

});

我的问题是for循环运行并递增到for循环中的最后一个数字。然后代码在最后一个数字上运行10次。

我认为它与同步和异步有关，但如果我说实话，我不知道如何解决这个问题。

Answer 1

我不是casper的专家，但显然这是一个常见的JavaScript错误，你经常在每本解释闭包的书中找到它。 then子句中的匿名函数稍后执行，循环立即执行，因此当执行匿名函数时，循环变量已经处于其最后一个值，并且该值是被你的匿名函数接收。

推荐的常见技巧是在函数中传递循环变量以立即进行评估：

for (siteID = 1 ; siteID < 10; siteID++) {

    (function (siteID) {
        casper.then(function(){

            this.fill('form#form1', {'txtSiteName' : siteID }, true);

        })(siteID);
    });

}

在你的特定情况下，我会检查this变量是否被正确绑定（我猜这是casper正确绑定它，对吧？）。

Answer 2

我建议你使用这段代码：

var casper = require('casper').create({
    verbose: true,
    logLevel: 'debug',
    pageSettings: {
        loadImages: false, // The WebPage instance used by Casper will
        loadPlugins: false, // use these settings
        userAgent: 'Mozilla/5.0 (Macintosh Intel Mac OS X 10_7_5) AppleWebKit/537.4 (KHTML, like Gecko) Chrome/22.0.1229.94 Safari/537.4'
    }
});

casper.start();

for (siteID = 1 ; siteID < 10; siteID++) {
    casper.wait(100);
    simpleFunction(siteID)
}

function simpleFunction(siteID){
    casper.then(function(){
        casper.echo(siteID);
    });

    casper.then(function(){

        this.fill('form#form1', {'txtSiteName' : siteID }, true);

    });

    casper.then(function(){

        this.click('#BtnSiteSearch');
        this.wait('500');

    });

    casper.then(function(){

        this.echo("Longitude: " + this.fetchText('#pnlSiteDetail > fieldset > table > tbody > tr:nth-child(2) > td:nth-child(2)'));
        this.echo("Latitude: " + this.fetchText('#pnlSiteDetail > fieldset > table > tbody > tr:nth-child(3) > td:nth-child(2)'));
        this.echo("City: " + this.fetchText('#pnlSiteDetail > fieldset > table > tbody > tr:nth-child(5) > td:nth-child(2)'));
        this.echo("Area: " + this.fetchText('#pnlSiteDetail > fieldset > table > tbody > tr:nth-child(7) > td:nth-child(2)'));
        this.echo("Address: " + this.fetchText('#pnlSiteDetail > fieldset > table > tbody > tr:nth-child(9) > td:nth-child(2)'));
        this.echo("Access: " + this.fetchText('#pnlSiteDetail > fieldset > table > tbody > tr:nth-child(10) > td:nth-child(2)'));
        this.echo("H&S: " + this.fetchText('#pnlSiteDetail > fieldset > table > tbody > tr:nth-child(13) > td:nth-child(2)'));
        this.echo("Engineers: " + this.fetchText('#pnlSiteDetail > fieldset > table > tbody > tr:nth-child(14) > td:nth-child(2)'));
        this.echo("Owner: " + this.fetchText('#pnlSiteDetail > fieldset > table > tbody > tr:nth-child(8) > td:nth-child(2)'));

        this.capture('test' + siteID + '.png');

    });

}

casper.run();

CasperJS for循环为每次迭代产生相同的结果

2 个答案: