前端异步(async)解决方案(所有方案)

事件鉴定方法:

(1).onclick方法:

element.οnclick=function(){

//处理函数

}

优点：写法兼容到主流浏览器。

缺点：当同一个element元素绑定多个事件时，只有最后一个事件会被添加。

例如:

element.οnclick=handler1;

element.οnclick=handler2;

element.οnclick=handler3;

上诉只有handler3会被添加执行，所以我们使用另外一种方法添加事件。（2）attachEvent和addEvenListener方法

(2).attachEvent和addEvenListener方法:

//IE:attachEvent（IE下的事件监听）

elment.attachEvent(“onclick”,handler1);

elment.attachEvent(“onclick”,handler2);

elment.attachEvent(“onclick”,handler3);

上述三个方法执行顺序：3-2-1；

//标准addEventListener（标准下的监听）

elment.addEvenListener(“click”,handler1,false);

elment.addEvenListener(“click”,handler2,false);

elment.addEvenListener(“click”,handler3,false);>

执行顺序：1-2-3；

PS：该方法的第三个参数是冒泡获取(useCapture)，是一个布尔值：当为false时表示由里向外(事件冒泡)，true表示由外向里(事件捕获)。

document.getElementById(“id1”).addEventListener(“click”,function(){

console.log(‘id1’);

},false);

document.getElementById(“id2”).addEventListener(“click”,function({

console.log(‘id2’);

},false);

//点击id=id2的div，先在console中输出，先输出id2，在输出id1

document.getElementById(“id1”).addEventListener(“click”,function({

console.log(‘id1’);

},false);

document.getElementById(“id2”).addEventListener(“click”,function({

console.log(‘id2’);

},true);

//点击id=id2的div，先在console中输出，先输出id1，在输出id2

(3).DOM方法addEventListener()和removeListenner():

addEventListenner()和removeListenner()表示用来分配和删除事件的函数。这两种方法都需要三种参数，分别为：string（事件名称），要触发事件的函数function，指定事件的处理函数的时期或者阶段（boolean）。例子见（2）

(4).通用的时间添加方法:

on:function(elment,type,handler){

//添加事件

return element.attachEvent？elment.attachEvent(“on”+type,handler):elment.addEventListener(type,handler,false);

}

事件冒泡和事件捕获的区别,可以参考:

二.工具方案

工具方案大致分为以下5个:

• Promise

• gengerator函数

• async await

• node.js中 nextTick setImmidate

• 第三方库 async.js

下面针对每一个做详细说明应用:

1.Promise(重点)

(1).Promise的含义和发展:

含义:Promise 对象用于一个异步操作的最终完成（或失败）及其结果值的表示。简单点说，它就是用于处理异步操作的，异步处理成功了就执行成功的操作，异步处理失败了就捕获错误或者停止后续操作。

发展:Promise 是异步编程的一种解决方案，比传统的解决方案–回调函数和事件－－更合理和更强大。它由社区最早提出和实现，ES6将其写进了语言标准，统一了语法，原生提供了Promise

(2).它的一般形式:

new Promise(

/* executor */

function(resolve, reject) {

if (/* success */) {

// …执行代码

resolve();

} else { /* fail */

// …执行代码

reject();

}

}

);

其中，Promise中的参数executor是一个执行器函数，它有两个参数resolve和