直接在Chrome里抓取数据

一个小测试发现可以自动做题，于是想通过脚本的方式看能不能获取相应的题库，刚好可以学习一下JS异步操作。花了一天时间，总算跑顺利了，遇到了不少坑。记录下来分享。

1、JS如何顺序执行

JS有强大的异步操作机制，但由于之前顺序执行的思路受限，直接用For循环的话会把请求结果的顺序搞乱。因此需要让JS在异步的基础上还能够顺序执行，基本的办法是采用Callback的方式。同时为了避免JS在页面的DOM进行操作过程中出现DOM不存在的情况使用SetTimeout来延时执行（这个地方费了了小半天时间）。

注意由于程序代码中有使用$.ajax请求，因此把回调的语句放到$ajax请求的Success方法里。

基本代码结构代码如下：

var i = 0;
var loopCall = function(count) {
    callProcess(i, function() {
        i++;
        if (i < count) {
            loopCall(count);
        }
    });
};

function callProcess(i, callback) {
    console.log('running on: ' + i.toString());

    //process code
    //...
    //...
    
    //使用setTimeout延时，避免DOM操作错误
    setTimeout(function(){callback();},100);
}

loopCall(1000);

 

2.数据怎么存储

之前只知道有LocalStorage，开发过程中Google了一下才知道有WebSQL，语法和操作也挺简单，也尝试过使用数组变量来存储数据，但发现变量数据大于150K左右的时候浏览器就很慢。因此使用WebSQL来存储

var db = openDatabase(' mydatabase ', '2.0', 'my db', 2 * 1024); 
   db.transaction(function (tx) {   
     tx.executeSql('CREATE TABLE IF NOT EXISTS t1 (id unique, log)'); 
     tx.executeSql('INSERT INTO t1  
                           (id,log) VALUES (?, ?'), [e_id, e_log];  //e_id和e_log是外部变量
   }); 

 

总结

其他处理代码基本就是原来的页面代码拷贝过来修改修改另加一定的调试。之前想用JS来写一直没有找到场景，现在用了虽然遇到点问题但总算是克服过了。不过JS在异步调用想处理成同步的多层嵌套之后还是需要好好规划一下，虽然在ES6之后增加了Promise类型。