异步javascript的原理和实现技巧介绍

2024-05-06 14:20:56

字体：大中小

来源：转载

供稿：网友

因为工作的需要，我要在网页端编写一段脚本，把数据通过网页批量提交到系统中去。所以我就想到了Greasemonkey插件，于是就开始动手写，发现问题解决得很顺利。但是在对脚本进行总结和整理的时候，我习惯性地问了自己一个问题：能不能再简单点？
我的答案当然是“能”。

首先回顾我的数据批量提交的需求：我有一批用户数据要插入到系统中，但是因为系统库表结构不是行列式的，所以无法转化为sql语句插入。要插入的数据有接近200条，就是傻呵呵地手工录入到系统，估计也要1天的时间。作为程序员，当然不会干这么傻的事情，我一定要用程序来解决。这个编程的过程耗费了我1天的时间。相比手工录入，我额外收入是这篇博文，绝对的合算！

编程平台选择没花费时间，直接选定基于Greasemonkey写自己的脚本，浏览器当然是firefox了。脚本的工作过程：
在脚本中预先存放要插入的数据
模拟鼠标点击，打开页面中的输入窗口
将数据录入到输入窗口，并模拟点击“提交”按钮，将数据提交到系统中。
依次循环，直到所有数据都处理完毕。

这里的技术难点在于：
打开输入窗口，需要等待不定期的时间，视网络情况而定。
提交数据到后台，需要等待处理完毕之后才可以循环下一个数据。
如果我是菜鸟的话，我当然直接写一个类似这样的应用逻辑：
代码如下:
for(var i = 0; i < dataArray.length; ++i)
{ 3: clickButtonForInputWindow();
waitInputWindow();
enterInputData(dataArray[i]);
clickSubmitButton();
waitInputWindowClose();
}

实际上这样写所有浏览器都会陷入一片白屏，并在若干分钟之后提示“没有响应”而被强行终止掉。原因就是浏览器在调用javascript的时候，主界面是停止响应的，因为cpu交给js执行了，没有时间去处理界面消息。

为了满足“不锁死”的要求，我们可以把脚本修改成这样：
代码如下:
for(var i = 0; i < dataArray.length; ++i)
{
setTimeout(clickButtonForInputWindow);
…
setTimeout(waitInputWindowClose);
}

实际上setTimeout和setInterval是浏览器唯一可以支持异步的操作。如何更优雅地使用这两个函数来实现异步操作呢？目前简单的答案是老赵的Wind.js。虽然我没有用过这个函数库，但是光是$await调用，就是符合我一贯对简洁的要求的。但是对于我这样的单个文件的脚本来说，去网上下载一个外部js库，明显不如有一段支持异步操作的代码拷贝过来的快和爽。

所以我决定另辟蹊径，做一个不要编译而且易用性还可以更能够Copy&Paste的异步函数库。

说异步之前，我们一起回忆一下同步操作的几种结构类型：

顺序：就是语句的先后顺序执行

上一篇：Google的跟踪代码动态加载js代码方法应用

下一篇：Javascript开发之三数组对象实例介绍