javascript异步编程

2024-10-26 15:09:52

就好像排队，前面的人忙着忙着突然上厕所了，后面的人阻塞在这里，因此我们就需要让前面的人死到一边去，让后面的人跟进……AJAX就是这个概念，请求还在继续，但我们还可以做其他事。

javascript中实现这个功能的是来自BOM的一个函数setTimeout，但相关的DOM操作也提供了一系列实现。如XMLHttpRequest对象与script标签的onreadystatechange回调，image的onload与onerror回调，iframe的onload，DOM元素的事件回调，HTML5的跨域消息传送postMessage，QuickTime与flash对象的加载……

setTimeout的零秒延迟在前些年时间被国内宣扬得特别厉害，但setTimeout是所有延迟中最慢的，最少要花上10多毫秒，如果用setTimeout来开发特效，这特效会运行得比较慢。下面是一个性能测试：

Async performance test

pre {
background-color: #eeeeee;
padding: 20px;
}
div.test {
margin: 20px;
padding: 10px;
border: solid black 1px;
}

setTimeout (slow, takes about 10 sec)

function async(callback) {
setTimeout(callback, 0);
}

img.onerror (data:uri)

function async(callback) {
var img = new Image;
img.addEventListener('error', callback, false);
img.src = 'data:,foo';
}

script.onreadystatechange

function async(callback) {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "javascript:";
script.onreadystatechange = function () {
document.body.removeChild(script);
callback();
}
document.body.appendChild(script);
}

script.onload (data:uri)

function async(callback) {
var script = document.createElement('script');
script.onload = function() {
document.body.removeChild(script);
callback();
}
script.src = 'data:text/javascript,';
document.body.appendChild(script);
}

xhr.onreadystatechange (data:text/plain,foo)

function async(callback) {
var xhr = new XMLHttpRequest;
xhr.open('GET','data:text/plain,foo',true);
xhr.onreadystatechange = function() {
xhr.onreadystatechange = null;
callback();
};
xhr.send(null);
}

self.postMessage

function async(callback) {
var n = ++async.count;
window.addEventListener('message',function(e){
if (e.data == n) {
window.removeEventListener('message', arguments.callee,false);
callback();
}
},false);
window.postMessage(n, location.protocol + "//" + location.host);
}
async.count = 0;

function runtest(div) {
var pre = div.getElementsByTagName('pre')[0];
eval(pre.textContent || pre.innerText); // load async function
var p = div.getElementsByTagName('p')[0];

var t = new Date, n = 1000, i = 0, flag = true;
try {
test();
} catch (e) {}
setTimeout(function() {if (flag) p.innerHTML = 'failed'; flag = false}, 200);

function test() {
if (i++

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

	Chromium	Safari	Firefox	Opera 10.10	Opera 10.50
setTimeout	4.32ms	10.201ms	10.302ms	10.38ms	9.876ms
img.onerror	0.199ms	0.678ms	0.201ms	0.058ms	0.575ms
script.onreadystatechange	fail	fail	fail	fail	fail
script.onload	0.414ms	0.138ms	0.414ms	fail	fail
xhr.onreadystatechange	fail	0.622ms	fail	0.078ms	0.079ms
self.postMessage	0.096ms	0.123ms	0.112ms	0.049ms	0.094ms

为了处理这种异步调用，Mochikit从Python的Twisted框架借来了Deferred这个类，并用它来处理AJAX的回调。AJAX的回调通常有两种，成功加载时的回调与请求失败的回调，IE8的XDomainRequest就有这两种回调了，标准浏览器的script与image也有这两种回调，分别称之为onload与onerror。Mochikit的Deferred实例就内置一个数组，每次包含这两种回调，依次执行。Mochikit这伟大的遗产后来由dojo发扬光大了，至于怎么用，自己google吧。

下面是我的框架对它的应用，我已把它整合到我的框架中：

代码如下:

<!doctype html>
<html>
<head>
<title>异步操作例子 by 司徒正美</title>
<meta charset="utf-8"/>
<meta content="IE=8" http-equiv="X-UA-Compatible"/>
<meta name="keywords" content="异步操作例子 by 司徒正美" />
<meta name="description" content="异步操作例子 by 司徒正美" />
<%= javascript_include_tag "dom.js" %>
<%= javascript_tag "window._token = '#{form_authenticity_token}'" if ActionController::Base.allow_forgery_protection %>
<script type="text/javascript" charset="utf-8">
dom.ready(function(){
dom.require("ajax");
dom.ajax({method:"post",
async:true,
dataType:"text",
data:{authenticity_token:window._token}
}).next(function(a){
alert(a)
});
dom.jsonp({url:"http://del.icio.us/feeds/json/fans/stomita"}).next(function(json){
alert(json)
}).error(function(e){
alert(e)
});
});
</script>
</head>
<body>
</body>
</html>

后台：

代码如下:

class HomeController < ApplicationController
def index
if request.xhr?
name = params[:name]
puts "-------------"
render :text => "<p>The time is <b>" + DateTime.now.to_s + "</b></p>"
end
end
end

在日本一博客提到这样一个捕捉异步错误的例子：

代码如下:

function throwError(){
throw new Error('ERROR');
}
try{
setTimeout(throwError, 3000);
} catch(e){
alert(e);
}

看来try...catch是无法捕捉这种形式的错误，window.onerror可以，但好像只有IE与FF支持。如果用Deferred来处理，就简单了！

代码如下:

dom.Deferred.next(function () {
throw new Error("错误")
}).wait(1).error(function(e){
alert(e instanceof Error)
});

列队处理。由于是使用了异步，因此不会阻塞页面的演染。

代码如下:

<!doctype html>
<html>
<head>
<title>异步操作例子 by 司徒正美</title>
<meta charset="utf-8"/>
<meta content="IE=8" http-equiv="X-UA-Compatible"/>
<meta name="keywords" content="异步操作例子 by 司徒正美" />
<meta name="description" content="异步操作例子 by 司徒正美" />
<%= javascript_include_tag "dom.js" %>
<script type="text/javascript" charset="utf-8">
dom.require("deferred");
dom.require("query");
dom.ready(function(){
var a = dom("#aaa")[0];
dom.Deferred.loop(10,function(i){
a.innerHTML += i+"<br/>"
});
dom.Deferred.loop(10,function(i){
a.innerHTML += String.fromCharCode(i+97)+"<br/>"
});
dom.Deferred.loop(10,function(i){
a.innerHTML += "司徒正美"+i+"<br/>"
});
});
/*结果
0
a
司徒正美0
1

司徒正美1
2
c
司徒正美2
3
d
司徒正美3
4
e
司徒正美4
5
f
司徒正美5
6
g
司徒正美6
7
h
司徒正美7
8
i
司徒正美8
9
j
司徒正美9
*/
</script>
</head>
<body>
<div id="aaa"></div>
</body>
</html>

详谈javascript异步编程

异步编程带来的问题在客户端Javascript中并不明显,但随着服务器端Javascript越来越广的被使用,大量的异步IO操作使得该问题变得明显.许多不同的方法都可以解决这个问题,本文讨论了一些方法,但并不深入.大家需要根据自己的情况选择一个适于自己的方法. 本文为大家详细介绍js中的异步编程,具体内容如下一关于事件的异步事件是JavaScript中最重要的一个特征,nodejs就是利用js这一异步而设计出来的.所以这里讲一下事件机制. 在一个js文件中,如果要运行某一个函数,有2中手段
javascript使用Promise对象实现异步编程

Promise对象是CommonJS工作组为异步编程提供的统一接口,是ECMAScript6中提供了对Promise的原生支持,Promise就是在未来发生的事情,使用Promise可以避免回调函数的层层嵌套,还提供了规范更加容易的对异步操作进行控制.提供了reject,resolve,then和catch等方法. 使用PROMISE Promise是ES6之后原生的对象,我们只需要实例化Promise对象就可以直接使用. 实例化Promise: var promise = new Promis
Javascript异步编程的4种方法让你写出更出色的程序

你可能知道,Javascript语言的执行环境是"单线程"(single thread). 所谓"单线程",就是指一次只能完成一件任务.如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务,以此类推. 这种模式的好处是实现起来比较简单,执行环境相对单纯:坏处是只要有一个任务耗时很长,后面的任务都必须排队等着,会拖延整个程序的执行.常见的浏览器无响应(假死),往往就是因为某一段Javascript代码长时间运行(比如死循环),导致整个页面卡在这个地方,其
详谈nodejs异步编程

目前需求中涉及到大量的异步操作,实际的页面越来越倾向于单页面应用.以后可以会使用backbone.angular.knockout等框架,但是关于异步编程的问题是首先需要面对的问题.随着node的兴起,异步编程成为一个非常热的话题.经过一段时间的学习和实践,对异步编程的一些细节进行总结. 1.异步编程的分类解决异步问题方法大致包括:直接回调.pub/sub模式(事件模式).异步库控制库(例如async.when).promise.Generator等. 1.1 回调函数回调函数是常用的解决异
基于javascript的异步编程实例详解

本文实例讲述了基于javascript的异步编程.分享给大家供大家参考,具体如下: 异步函数这个术语有点名不副实,调用一个函数后,程序只在该函数返回后才能继续.JavaScript程序员如果称一个函数为异步的,其意思就是这个函数会导致将来再运行另一个函数,后者取自于事件队列.如果后面这个函数是作为参数传递给前者的,则称其为回调函数. callback 回调函数是异步编程最基本的方式. 采用这种方式,我们把同步操作变成了异步操作,主函数不会堵塞程序运行,相当于先执行程序的主要逻辑,将耗时的操作推迟
JavaScript中实现异步编程模式的4种方法

你可能知道,Javascript语言的执行环境是"单线程"(single thread). 所谓"单线程",就是指一次只能完成一件任务.如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务,以此类推. 这种模式的好处是实现起来比较简单,执行环境相对单纯:坏处是只要有一个任务耗时很长,后面的任务都必须排队等着,会拖延整个程序的执行.常见的浏览器无响应(假死),往往就是因为某一段Javascript代码长时间运行(比如死循环),导致整个页面卡在这个地方,其他
理解javascript异步编程

一.异步机制 JavaScript的执行环境是单线程的,单线程的好处是执行环境简单,不用去考虑诸如资源同步,死锁等多线程阻塞式编程等所需要面对的恼人的问题.但带来的坏处是当一个任务执行时间较长时,后面的任务会等待很长时间.在浏览器端就会出现浏览器假死,鼠标无法响应等情况.所以在浏览器端,耗时很长的操作都应该异步执行,避免浏览器失去响应.所谓异步执行,不同于同步执行(程序的执行顺序与任务的排列顺序是一致的.同步的),每一个任务有一个或多个回调函数(callback),前一个任务结束后,不是执行后一
Javascript异步编程模型Promise模式详细介绍

Promise 编程模式也被称为 thenable,可以理解为延迟后执行.每个 Promise 都拥有一个叫做 then 的唯一接口,当 Promise 失败或成功时,它就会进行回调.它代表了一种可能会长时间运行而且不一定必须完成的操作结果.这种模式不会阻塞和等待长时间的操作完成,而是返回一个代表了承诺的(promised)结果的对象. 当前的许多 JavaScript 库(如 jQuery 和 Dojo.AngularJS)均添加了这种称为 Promise 的抽象.通过这些库,开发人员能够在
跟我学习javascript解决异步编程异常方案

一.JavaScript异步编程的两个核心难点异步I/O.事件驱动使得单线程的JavaScript得以在不阻塞UI的情况下执行网络.文件访问功能,且使之在后端实现了较高的性能.然而异步风格也引来了一些麻烦,其中比较核心的问题是: 1.函数嵌套过深 JavaScript的异步调用基于回调函数,当多个异步事务多级依赖时,回调函数会形成多级的嵌套,代码变成金字塔型结构.这不仅使得代码变难看难懂,更使得调试.重构的过程充满风险. 2.异常处理回调嵌套不仅仅是使代码变得杂乱,也使得错误处理更复杂.这
JavaScript异步编程:异步数据收集的具体方法

Asyncjs/seriesByHand.js 复制代码代码如下: var fs = require('fs');process.chdir('recipes'); // 改变工作目录var concatenation = ''; fs.readdir('.', function(err, filenames) { if (err) throw err; function readFileAt(i) { var filename = filenames[i]; fs.stat(f
详解JavaScript异步编程中jQuery的promise对象的作用

Promise, 中文可以理解为愿望,代表单个操作完成的最终结果.一个Promise拥有三种状态:分别是unfulfilled(未满足的).fulfilled(满足的).failed(失败的),fulfilled状态和failed状态都可以被监听.一个愿望可以从未满足状态变为满足或者失败状态,一旦一个愿望处于满足或者失败状态,其状态将不可再变化.这种"不可改变"的特性对于一个Promise来说非常的重要,它可以避免Promise的状态监听器修改一个Promise的状态导致别的监听器的行
JavaScript异步编程Promise模式的6个特性

在我们开始正式介绍之前,我们想看看Javascript Promise的样子: 复制代码代码如下: var p = new Promise(function(resolve, reject) { resolve("hello world");}); p.then(function(str) { alert(str);}); 1. then()返回一个Forked Promise 以下两段代码有什么区别呢? 复制代码代码如下: // Exhibit Avar p = new Pr
javascript异步编程代码书写规范Promise学习笔记

最近工作轻松了点,想起了以前总是看到的一个单词promise,于是耐心下来学习了一下. 一:Promise是什么?为什么会有这个东西? 首先说明,Promise是为了解决javascript异步编程时候代码书写的方式产生的. 随着javascript的发展,异步的场景越来越多.前端有AJAX,setTimeout等,后端Node异步更多.按照传统的做法,那么就是各种回调嵌回调.代码可以把人绕晕. 这个时候,CommonJS社区提出了一个叫做Promise/A+的规范,这个规范定义了如何书写异步代