列举js异步编程的方法

‘壹’ JS异步加载的几种方式

异步加载又叫非阻塞加载，浏览器在下载执行js的同时，还会继续进行后续页面的处理。主要有三种方式。

方法一：也叫Script DOM Element

这段代码将使JS执行5秒才完成！

JS延迟加载机制(LazyLoad)：简单来说，就是在浏览器滚动到某个位置在触发相关的函数，实现页面元素的加载或者某些动作的执行。如何实现浏览器滚动位置的检测呢？可以通过一个定时器来实现，通过比较某一时刻页面目标节点位置和浏览器滚动条高度来判断是否需要执行函数。

‘贰’ javascript同步和异步的区别与实现方式

javascript语言是单线程机制。所谓单线程就是按次序执行，执行完一个任务再执行下一个。

对于浏览器来说，也就是无法在渲染页面的同时执行代码。

单线程机制的优点在于实现起来较为简单，运行环境相对简单。缺点在于，如果中间有任务需要响应时间过长，经常会导致

页面加载错误或者浏览器无响应的状况。这就是所谓的“同步模式”，程序执行顺序与任务排列顺序一致。对于浏览器来说，

同步模式效率较低，耗时长的任务都应该使用异步模式；而在服务器端，异步模式则是唯一的模式，如果采用同步模式个人认为

服务器很快就会出现12306在高峰期的表现。。。。

异步模式的四种方式：

1.回调函数callback

所谓回调函数，就是将函数作为参数传到需要回调的函数内部再执行。

典型的例子就是发送ajax请求。例如：

$.ajax({

async: false,

cache: false,

dataType: 'json',

url: "url",

success: function(data) {

console.log('success');

},

error: function(data) {

console.log('error');

}

})

当发送ajax请求后，等待回应的过程不会堵塞程序运行，耗时的操作相当于延后执行。

回调函数的优点在于简单，容易理解，但是可读性较差，耦合度较高，不易于维护。

2.事件驱动

javascript可以称之为是基于对象的语言，而基于对象的基本特征就是事件驱动（Event-Driven）。

事件驱动，指的是由鼠标和热键的动作引发的一连串的程序操作。

例如，为页面上的某个
$('#btn').onclick(function(){

console.log('click button');

});

绑定事件相当于在元素上进行监听，是否执行注册的事件代码取决于事件是否发生。

优点在于容易理解，一个元素上可以绑定多个事件，有利于实现模块化；但是缺点在于称为事件驱动的模型后，流程不清晰。

3.发布/订阅

发布订阅模式（publish-subscribe pattern）又称为观察者模式(Observer pattern)。

该模式中，有两类对象：观察者和目标对象。目标对象中存在着一份观察者的列表，当目标对象

的状态发生改变时，主动通知观察者，从而建立一种发布/订阅的关系。

jquery有相关的插件，在这不是重点不细说了。。。。回头写个实现贴上来

4.promise模式

promise对象是CommonJS工作组提供的一种规范，用于异步编程的统一接口。

promise对象通常实现一种then的方法，用来在注册状态发生改变时作为对应的回调函数。

promise模式在任何时刻都处于以下三种状态之一：未完成（unfulfilled）、已完成（resolved）和拒绝（rejected）。以CommonJS
Promise/A
标准为例，promise对象上的then方法负责添加针对已完成和拒绝状态下的处理函数。then方法会返回另一个promise对象，以便于形成promise管道，这种返回promise对象的方式能够支持开发人员把异步操作串联起来，如then(resolvedHandler,
rejectedHandler); 。resolvedHandler
回调函数在promise对象进入完成状态时会触发，并传递结果；rejectedHandler函数会在拒绝状态下调用。

Jquery在1.5的版本中引入了一个新的概念叫Deferred，就是CommonJS promise A标准的一种衍生。可以在jQuery中创建

$.Deferref的对象。同时也对发送ajax请求以及数据类型有了新的修改，参考JQuery API。

除了以上四种，javascript中还可以利用各种函数模拟异步方式，更有诡异的诸如用同步调用异步的case

只能用team里同事形容java和javascript的一句话作为结尾：

“写java像在高速路上开车，写javascript像在草原上开车”-------------以此来形容javascript这种无类型的语言有多自由
but，如果草原上都是坑。

‘叁’ js异步加载的方式有哪些

方法一：Script Dom Element

(function(){
var scriptEle = document.createElement("script");
scriptEle.type = "text/javasctipt";
scriptEle.async = true;
scriptEle.src = "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js";
var x = document.getElementsByTagName("head")[0];
x.insertBefore(scriptEle, x.firstChild);
})();
方法二：onload时的异步加载
function(){
if(window.attachEvent){
window.attachEvent("load", asyncLoad);
}else{
window.addEventListener("load", asyncLoad);
}
var asyncLoad = function(){
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
}
})();

方法三：$(document).ready()

‘肆’ JS中的异步操作有哪些

JS中的异步操作：
1、定时器都是异步操作
2、事件绑定都是异步操作
3、AJAX中一般我们都采取异步操作（也可以同步）
4、回调函数可以理解为异步（不是严谨的异步操作）

‘伍’ 前端开发中如何实现异步编程

异步编程其实很常见，特别是在出线Node.js之后，异步编程更是让很多开发者受益。那么回到最初的地方，传统的前端开发中如何实现异步编程呢？下面列举了js实现异步编程的四种方式。
方法一：使用回调函数
方法二：事件监听
可以定义一个事件，并为这个事件设定处理函数。这样只有当这个时间发生的情况下，对应的处理函数才会被执行。

方法三：事件的发布/订阅

这个模式在NodeJS以及其他JS框架中都有实现，是一个非常常用的异步编程方式。具体的原理及实现方法可以参考我之前的博客：http://blog.csdn.net/fareise/article/details/52198877《 Node中EventEmitter以及如何实现JavaScript中的订阅/发布模式》，里面有比较详细的解析。

方法四：Promise模式

ES6中提供了原生的Promise对象，这个模式最开始只是一个构想，后来由一些框架库实现。Promise对象代表了未来才会知道结果的事件。

Promise的基本思路就是，将需要异步执行的事件储存起来，然后根据异步事件之行后的结果状态执行下一步的操作。具体的Promise对象的原理和ES6中的使用方法将在下一篇文章中更加深入的进行介绍。

‘陆’ 如何进行nodejs异步编程

更新下，我之所以让您玩一下AJAX，是希望您体验一下异步，并不是希望您了解AJAX这机制的实现方法，因为AJAX是一个特别典型且简单的异步场景，比如：
执行某个函数 -> 执行语句A,B,C,D -> 在D语句发起异步请求，同时向引擎注册一个回调事件 -> 执行E,F,G ->退出函数块 ，引擎Loop...Loop...Loop，此时异步的请求得到了Response，之前注册的回调被执行。

‘柒’ js如何异步执行方法

var xmlHttp;
function createXMLHttpRequest(){
//Mozilla 浏览器（将XMLHttpRequest对象作为本地浏览器对象来创建）
if(window.XMLHttpRequest){ //Mozilla 浏览器
xmlHttp = new XMLHttpRequest();
}else if(window.ActiveXObject) { //IE浏览器
//IE浏览器（将XMLHttpRequest对象作为ActiveX对象来创建）
try{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){}
}
}
if(xmlHttp == null){
alert("不能创建XMLHttpRequest对象");
return false;
}
}
//用于发出异步请求的方法
function sendAsynchronRequest(url,parameter,callback){
createXMLHttpRequest();
if(parameter == null){
//设置一个事件处理器，当XMLHttp状态发生变化，就会出发该事件处理器，由他调用
//callback指定的javascript函数
xmlHttp.onreadystatechange = callback;
//设置对拂去其调用的参数（提交的方式，请求的的url，请求的类型（异步请求））
xmlHttp.open("GET",url,true);//true表示发出一个异步的请求。
xmlHttp.send(null);
}else{
xmlHttp.onreadystatechange = callback;
xmlHttp.open("POST",url,true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
xmlHttp.send(parameter);
}
}
//以上代码是通用的方法，接下来是调用以上的方法
function loadPros(title,count,pid,cid,level){
// 调用异步请求方法
url = "。。。。。。。。";
sendAsynchronRequest(url,null,loadCallBack);
}
// 指定回调方法
function loadCallBack(){
try
{
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
if(xmlHttp.responseText != null && xmlHttp.responseText != ""){
var divProid = document.getElementById('videolist');
divProid.innerHTML = xmlHttp.responseText;
for(i=0;i<len;i++)
{
var video_url = document.getElementById("videolist"+i+"").href;
if(video_url != undefined && video_url != null && video_url != ""){
window.location.href = video_url;
}
}
}
}
}
if (xmlHttp.readyState == 1)
{
//alert("正在加载连接对象......");
}
if (xmlHttp.readyState == 2)
{
//alert("连接对象加载完毕。");
}
if (xmlHttp.readyState == 3)
{
//alert("数据获取中......");
}
}
catch (e)
{
//alert(e);
}
}

‘捌’ 如何进行nodejs异步编程

我建设玩一下AJAX，是希望您体验一下异步，并不是希望您了解AJAX这机制的实现方法，因为AJAX是一个特别典型且简单的异步场景，比如：
执行某个函数 -> 执行语句A,B,C,D -> 在D语句发起异步请求，同时向引擎注册一个回调事件 -> 执行E,F,G ->退出函数块 ，引擎Loop...Loop...Loop，此时异步的请求得到了Response，之前注册的回调被执行。

实际上Node.js主要是为了应对主流web app存在大量I/O等待而CPU闲置的场景所衍生的解决方案，而在架构上，它的后端有一个底层的worker封装，每当你有一个诸如addUser这样的I/O操作时，它们都会被交由worker去执行从而达到让出尽快让出当前函数的执行权的目的，在向引擎注册完回调后，内部会通过事件轮询去检查该I/O事件的句柄，当句柄显示该事件操作完成后，则注册的回调则被执行。

所以，假设有人（按题设，简化一下场景，有且只有2个人）同时请求addUser(A)和userList(B)，B的请求会在执行完A的请求内部所有同步代码后被执行，而哪怕worker此时仍然在进行addUser 这一 I/O操作，用户B也并不会被引擎挂起或者等待。这就是为什么Node.js单节点却一样可以拥有高负载能力的原因。

至于什么样的代码是异步的，你看看node文档里fs模块的使用方法就知道了，大概的形式就是如下这种。
mole.method( args [,callback] )

当然还有一种比较极端的情况，假设您使用的数据库是山寨的，驱动是基于同步实现的，那么B就该等多久等多久把，树荫底下喝杯茶，下个棋，和后面的C,D,E,F,G打个招呼呗~~~

我推荐您先去玩一下前端的AJAX了解一下 异步编程方式，体验一下异步的“感觉”，然后看一本叫《JavaScript异步编程》的书。

Node.js 是一款基于Event-driven的模型构建的Framework，它典型的特征就是通过内置的事件轮询来调度事件，通常来说node.js的数据库驱动都是基于异步实现的，所以在实际情况中，A提交博客和B注册用户这两个请求是可以同时由Node.js 来handle，并按照实际操作的处理事件分别调度给予浏览器响应。

当然，假设您在业务代码里写了一个耗时很久的同步代码（比如直接写一个while(true)的loop，Node就死了），由于JavaScript本身单线程的限制，所以整个App就会被block住，后续的事件/程序只有等到该段代码执行完成之后才会被处理，这也是为什么我们通常不建议在Node.js层做大规模计算（JS本身的计算效率太低，会导致Node吞吐量会大大降低），而倾向由C++的拓展去实现。

‘玖’ 下面哪些方法可以用作javascript异步模式的编程

javascript语言是单线程机制。所谓单线程就是按次序执行，执行完一个任务再执行下一个。

对于浏览器来说，也就是无法在渲染页面的同时执行代码。

单线程机制的优点在于实现起来较为简单，运行环境相对简单。缺点在于，如果中间有任务需要响应时间过长，经常会导致

页面加载错误或者浏览器无响应的状况。这就是所谓的逗同步模式地，程序执行顺序与任务排列顺序一致。对于浏览器来说，

同步模式效率较低，耗时长的任务都应该使用异步模式；而在服务器端，异步模式则是唯一的模式，如果采用同步模式个人认为

服务器很快就会出现12306在高峰期的表现。。。。

异步模式的四种方式：

1.回调函数callback

所谓回调函数，就是将函数作为参数传到需要回调的函数内部再执行。

典型的例子就是发送ajax请求。例如：

$.ajax({

async: false,

cache: false,

dataType: 'json',

url: "url",

success: function(data) {

console.log('success');

},

error: function(data) {

console.log('error');

}

})

当发送ajax请求后，等待回应的过程不会堵塞程序运行，耗时的操作相当于延后执行。

回调函数的优点在于简单，容易理解，但是可读性较差，耦合度较高，不易于维护。

2.事件驱动

javascript可以称之为是基于对象的语言，而基于对象的基本特征就是事件驱动（Event-Driven）。

事件驱动，指的是由鼠标和热键的动作引发的一连串的程序操作。

例如，为页面上的某个
$('#btn').onclick(function(){

console.log('click button');

});

绑定事件相当于在元素上进行监听，是否执行注册的事件代码取决于事件是否发生。

优点在于容易理解，一个元素上可以绑定多个事件，有利于实现模块化；但是缺点在于称为事件驱动的模型后，流程不清晰。

3.发布/订阅

发布订阅模式（publish-subscribe pattern）又称为观察者模式(Observer pattern)。

该模式中，有两类对象：观察者和目标对象。目标对象中存在着一份观察者的列表，当目标对象

的状态发生改变时，主动通知观察者，从而建立一种发布/订阅的关系。

jquery有相关的插件，在这不是重点不细说了。。。。回头写个实现贴上来

4.promise模式

promise对象是CommonJS工作组提供的一种规范，用于异步编程的统一接口。

promise对象通常实现一种then的方法，用来在注册状态发生改变时作为对应的回调函数。

promise模式在任何时刻都处于以下三种状态之一：未完成（unfulfilled）、已完成（resolved）和拒绝（rejected）。以CommonJS
Promise/A
标准为例，promise对象上的then方法负责添加针对已完成和拒绝状态下的处理函数。then方法会返回另一个promise对象，以便于形成promise管道，这种返回promise对象的方式能够支持开发人员把异步操作串联起来，如then(resolvedHandler,
rejectedHandler); 。resolvedHandler
回调函数在promise对象进入完成状态时会触发，并传递结果；rejectedHandler函数会在拒绝状态下调用。

Jquery在1.5的版本中引入了一个新的概念叫Deferred，就是CommonJS promise A标准的一种衍生。可以在jQuery中创建

$.Deferref的对象。同时也对发送ajax请求以及数据类型有了新的修改，参考JQuery API。

除了以上四种，javascript中还可以利用各种函数模拟异步方式，更有诡异的诸如用同步调用异步的case

只能用team里同事形容java和javascript的一句话作为结尾：

逗写java像在高速路上开车，写javascript像在草原上开车地-------------以此来形容javascript这种无类型的语言有多自由
but，如果草原上都是坑。

‘拾’ js回调函数如何实现异步，给一个例子

异步处理不用阻塞来等待处理完成，而是允许后续操作，直至其程序将处理完成，并回调通知此函数

那么在js中有如下几种异步方式：

示例1

varasync=function(callback){
//readdata
setTimeout(function(){
callback('data');
},1000);//1秒后回调
};
//使用
async(function(data){
alert(data);
});

示例2

varasync=function(callback){
varxhr=newXMLHttpRequest();
xhr.open('get','.',true);

xhr.onreadystatechange=function(){
callback(xhr.readyStatus);
};
xhr.send();
};

async(function(data){
alert(data);
});

示例3

varasync=function(callback){
varimg=newImage();
img.onload=img.onerror=function(){
callback(img);
};
img.src='x.jpg';
};
async(function(data){
alert(data);
});