js异步那些事

放在今天(2019/01/29) async await很普及的情况, 文字部分内容可能已经不适用了, 但是作为技术实现了解也是有好处的

js事件概念

异步回调：

首先了讲讲js中两个方法 setTimeout()和 setInterval（）

定义和用法：

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

语法：

setTimeout(callback,time)

callback 必需。要调用的函数后要执行的 JavaScript 代码串。
time 必需。在执行代码前需等待的毫秒数。

setInterval() 方法和setTimeout很相似，可按照指定的周期（以毫秒计）来调用函数或计算表达式。

比如上述代码就是可以每隔1000毫秒延迟执行timecount函数，不同的是后者是周期的执行timecount函数，
SetInterval为自动重复，setTimeout不会重复。

线程阻塞

JavaScript引擎是单线程运行的,浏览器无论在什么时候都只且只有一个线程在运行JavaScript程序.

<script type="text/javascript"> 
function f() { console.log("hello world");} 
var t = new Date();  //运行5秒 
while(true) { 
if(new Date() - t > 5000) { 
break; } 
} 
setTimeout(f, 1000); 
</script>

执行上述代码，可以发现，总的运行时间几乎要6秒多，因为是单线程，会在while循环里面消耗5秒的时间，然后才去执行settimeout函数。

队列

浏览器是基于一个事件循环的模型，在这里面，可以有多个任务队列，比如render是一个队列，响应用户输入是一个，script执行是一个。任务队列里放的是任务，同一个任务来源的任务肯定在同一个任务队列里。任务有优先级，鼠标或键盘响应事件优先级高，大概是其他任务的3倍。

而我们常用的setTimeout函数，其本质上也就是向这个任务队列添加回调函数，JavaScript引擎一直等待着任务队列中任务的到来.由于单线程关系,这些任务得进行排队,一个接着一个被引擎处理.

如果队列非空,引擎就从队列头取出一个任务,直到该任务处理完,即返回后引擎接着运行下一个任务,在任务没返回前队列中的其它任务是没法被执行的.

二，异步函数类型

异步io
首先来看看很典型的一个例子，ajax

<script type="text/javascript"> 
var  ajax = new XMLHttpRequest;
ajax.open("GET",url); 
ajax.send(null);
ajax.onreadystatechange = function () {
    if (request.readyState === 4) {
        if (request.status === 200) {
            return success(request.responseText);
        } else {
            return fail(request.status);
        }
    }
}
</script>

异步计时：
setTimeout，setInterval都是基于事件驱动型的，通常浏览器不会给这个太快的速度，一般是200次/秒，效率太低了是吧如果遇到有密集型的运算的话，那就呵呵了。但是在node.js中还有process.nextTick()这个强大的东西，运行的速度将近10万次/秒，很可观。

process.nextTick(callback)

功能：在事件循环的下一次循环中调用 callback 回调函数。效果是将一个函数推迟到代码书写的下一个同步方法执行完毕时或异步方法的事件回调函数开始执行时；与setTimeout(fn, 0) 函数的功能类似，但它的效率高多了。

基于node.js的事件循环分析，每一次循环就是一次tick，每一次tick时，v8引擎从事件队列中取出所有事件依次进行处理，如果遇到nextTick事件，则将其加入到事件队尾，等待下一次tick到来时执行；造成的结果是，nextTick事件被延迟执行；

nextTick的确是把某任务放在队列的最后（array.push)
nodejs在执行任务时，会一次性把队列中所有任务都拿出来，依次执行
如果全部顺利完成，则删除刚才取出的所有任务，等待下一次执行
如果中途出错，则删除已经完成的任务和出错的任务，等待下次执行
如果第一个就出错，则throw error
下面看一下应用场景（包含计算密集型操作，将其进行递归处理，而不阻塞进程）：

var http = require('http');
var wait = function (mils) {
    var now = new Date;
    while (new Date - now <= mils);
};
function compute() {
    // performs complicated calculations continuously
    console.log('start computing');
    wait(1000);
    console.log('working for 1s, nexttick');
    process.nextTick(compute);
}
http.createServer(function (req, res) {
    console.log('new request');
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('Hello World');
}).listen(5000, '127.0.0.1');
compute();

三，异步错误处理

异步异常的特点

由于js的回调异步特性，无法通过try catch来捕捉所有的异常：

try {
  process.nextTick(function () {
  	foo.bar();
  });
} catch (err) {
  //can not catch it
}
而对于web服务而言，其实是非常希望这样的：

//express风格的路由
app.get('/index', function (req, res) {
  try {
    //业务逻辑
  } catch (err) {
    logger.error(err);
    res.statusCode = 500;
    return res.json({success: false, message: '服务器异常'});
  }
});

如果try catch能够捕获所有的异常，这样我们可以在代码出现一些非预期的错误时，能够记录下错误的同时，友好的给调用者返回一个500错误。可惜，try catch无法捕获异步中的异常。
难道我们就这样放弃了么？其实还有一个办法

onerror事件

我们一般通过函数名传递的方式（引用的方式）将要执行的操作函数传递给onerror事件，如window.onerror=reportError;window.onerror=function(){alert(‘error’)}，但我们可能不知道该事件触发时还带有三个默认的参数，他们分别是错误信息，错误页面的url和错误行号。

<script type="text/javascript">   
    window.onerror=testError;   
    function testError(){   
    arglen=arguments.length;   
    var errorMsg="参数个数："+arglen+"个";   
    for(var i=0;i<arglen;i++){   
    errorMsg+="\n参数"+(i+1)+"："+arguments[i];   
}   
    alert(errorMsg);   
    window.onerror=null;   
    return true;   
}   
function test(){   
    error   
}   
test()   
</script>

嵌套式回调的解嵌套

JavaScript中最常见的反模式做法是，回调内部再嵌套回调。

<script type="text/javascript"> 
function checkPassword(username, passwordGuess, callback) {  
  var queryStr = 'SELECT * FROM user WHERE username = ?';  
  db.query(queryStr, username, function (err, result) {  
    if (err) throw err;  
    hash(passwordGuess, function(passwordGuessHash) {  
      callback(passwordGuessHash === result['password_hash']);  
    });  
  });  
} </script>

这里定义了一个异步函数checkPassword，它触发了另一个异步函数db.query，而后者又可能触发另外一个异步函数hash。它能用，而且简洁明了。但是，如果试图向其添加新特性，它就会变得毛里毛躁、险象环生，比如去处理那个数据库错误，而不是抛出错误、记录尝试访问数据库的次数、阻塞访问数据库，等等。
下面我们换一种写法，虽然这种写法很啰嗦但是可读性更高而且更易扩展。

<script type="text/javascript"> 
function checkPassword(username, passwordGuess, callback) {  
  var passwordHash;  
  var queryStr = 'SELECT * FROM user WHERE username = ?';  
  db.query(qyeryStr, username, queryCallback);  
 
  function queryCallback(err, result) {  
    if (err) throw err;  
    passwordHash = result['password_hash'];  
    hash(passwordGuess, hashCallback);  
  }  
 
  function hashCallback(passwordGuessHash) {  
    callback(passwordHash === passwordGuessHash);  
  }  
}  </script>

在平时写嵌套时，我们应该尽量避免多层嵌套，不然中间某个地方出错了将会导致你投入更多的时间去debug。

PubSub模式：

从原生的js角度，我们要监听某事件的方法就是利用addEventListener方法，但是当我们的页面趋于复杂，比如要向某个元素添加多个处理事件，那么就要用一个封装函数汇集多个处理函数

link.onclick = function() {
    clickHandler1.apply(this, arguments);
    clickHandler2.apply(this, arguments);
};

在jquery中，jquery.on()方法使用的比较多，在新版的jquery中，也舍弃了bind（）方法，统一使用on，jQuery 将link 元素的事件发布给了任何想订阅此事件的人。
Node.js中的EventEmitter 对象

要想给EventEmitter 对象添加一个事件处理器，只要以事件类型和事件处理器为参数调用on 方法即可。
emitter.on(‘evacuate’, function(message) {
console.log(message);
});
emit（意为“触发”）方法负责调用给定事件类型的所有处理器。举个例子，下面这行代码：
emitter.emit(‘evacuate’);
将调用evacuate 事件的所有处理器。

请注意，这里的术语事件跟事件队列没有任何关系。

使用emit 方法触发事件时，可以添加任意多的附加参数。所有参数均传递至所有处理器。
emitter.emit(‘evacuate’, ‘Woman and children first!’);
事件名称不存在任何限制，然而Node 相关文档还是规定了一条有用的约定。

如何实现一个自己的PubSub模式

一个PubSub模型主要方法有3个，订阅，退订，发布

<script type="text/javascript"> 
var PubSub = {};
// 用于储存事件队列
var queue = {};

// 订阅接口
PubSub.on = function(event, cb) {
  if (!queue[event]) {
    queue[event] = [];
  }
  queue[event].push(cb);
};

// 退订接口
PubSub.off = function(event, cb) {
  var currentEvent = queue[event];
  var len = 0;
  if (currentEvent) {
    len = currentEvent.length;
    for (var i = len - 1; i >= 0; i--) {
      if (currentEvent[i] === cb) {
        currentEvent.splice(i, 1);
      }
    }
  }
};

// 发布接口
PubSub.emit = function(event) {
  var currentEvent = queue[event];
  if (currentEvent) {
    for (var i = 0; i < currentEvent.length; i++) {
      currentEvent[i]();
    }
  }
};
</script>

使用

<script type="text/javascript"> 
// 订阅
var callbackA = function () {
    console.log('event a happened')
};
PubSub.on('a', callbackA);
PubSub.on('b', function() {
    console.log('event b happened')
});

// 退订 , 第二个参赛传入回调函数的引用
PubSub.off('a', callbackA);

// 发布
PubSub.emit('a');
PubSub.emit('b');
</script>

挖个坑，找一下jquery.on()的源码，看一下它自定义事件的实现

PubSub模式不适用在一次性的事件中，，如果是用promise的话就比较适合一次性的事件。

关于分布式事件，也可以参考一下angular.js的双向数据绑定的实现，http://www.tuicool.com/articles/vENni2Y

五，Promise（或者Deferred）对象

先来谈谈jquery中的promise的使用，来看一个例子
原本写一个小动画我们可能是这样的

<script type="text/javascript"> 
$('.animateEle').animate({
  opacity:'.5'
}, 4000,function(){
  $('.animateEle2').animate({
    width:'100px'
  },2000,function(){
    $('.animateEle3').animate({
      height:'0'
    },2000);
  });
});
</script>

但是如果我们使用promis对象的话，就可以使得代码更加简单易懂

<script type="text/javascript"> 
var animate1 = function() {
  return $('.animateEle1').animate({opacity:'.5'},4000).promise();
};
var animate2 = function() {
  return $('.animateEle2').animate({width:'100px'},2000).promise();
};
var animate3 = function(){
  return $('.animateEle3').animate({height:'0'},2000).promise();
};
$.when(animate1()).then(animate2).then(animate3);
</script>

看了上面的例子大概对promise的作用有一定的了解了吧，那就来说说promis的原理吧

promise对象方法

对于DOM，动画，ajax相关方法，都可以使用 promise 方法。调用 promise 方法，返回的是 promise 对象。可以链式调用 promise 方法。
比如jquery中的ajax的 $.post $.get $.ajax 等方法，实际上都是默认调用了promise方法，然后返回了一个promise对象

promise对象常见的方法有三个： done ， fail ， then 。

<script type="text/javascript"> 
$.get('/',{}).done(function(data){
    console.log('success');
}).fail(function(){
    console.log('fail');
});
</script>

jquery 这里的接口方法太多了，就跟早期的事件方法绑定一样， live ， delegate ， bind ，最终还是归为 on

deferred对象方法

deferred 对象呢，也就是使用 $.Deferred() 方法，以及 $.when() 等方法创造出来的对象，它可以理解为一个升级版特殊的的promise对象
来看看一个例子

 <script type="text/javascript"> 
 var  promisepbj = new $.Deferred();

 promisepbj.done(function() {
  console.log('haha,done');
}).fail(function() {
  console.log('失败了');
}).always(function(res) {
  console.log('我总是被执行啦');
});

//使用resolve或者reject就可以调用defferred对象了
promisepobj.resolve();
//promisepobj.reject();

resolve 方法会触发 done 的回调执行， reject 会触发 fail 的回调，对于 always 方法,deferred 对象,无论是 resolve 还是 reject ，都会触发该方法的回调。

ES6 Promise

前面讲了很多jquery的promise实现，$.Deferred 和 ES2015 的 Promise 是不同的东西，因为前者不符合 Promises/A+ 规范。 Promise 对象在 EMCAScript 2015 当中已经成为标准。现在要来谈谈马上要成为主流趋势的es6原生promise对象，首先贴一个很详细的es6 promise的小书，基本你知道的不知道都在里面 http://liubin.org/promises-book/#introduction，

把promise解释的很清楚的文章很多，我自认为我写不到他们那么好，索性干脆把阮一峰大神的文章贴出来 http://es6.ruanyifeng.com/#docs/promise
我就来个简化版本的吧，用最短的字数来入个门。

定义：
谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。
特点：

有三种状态：Pending（进行中）、Resolved（已完成，又称Fulfilled）和Rejected（已失败）。
一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从Pending变为Resolved和从Pending变为Rejected。只要这两种情况发生，状态就凝固了

基本用法

  <script type="text/javascript"> 
var promise = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});
</script>
Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。
  <script type="text/javascript"> 
function timeout(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, ms, 'done');
  });
}

timeout(100).then((value) => {
  console.log(value);
});
</script>

上面代码中，timeout方法返回一个Promise实例，表示一段时间以后才会发生的结果。过了指定的时间（ms参数）以后，Promise实例的状态变为Resolved，就会触发then方法绑定的回调函数。

异常处理

　　异常处理一直是回调的难题，而promise提供了非常方便的catch方法：在一次promise调用中，任何的环节发生reject，都可以在最终的catch中捕获到：

Promise.resolve().then(function(){
    return loadImage(img1);
}).then(function(){
    return loadImage(img2);
}).then(function(){
    return loadImage(img3);
}).catch(function(err){
    //错误处理
})

基本的 api

Promise.resolve()
Promise.reject()
Promise.prototype.then()
Promise.prototype.catch()
Promise.all()
Promise.race()
具体的很多的用法可以参考阮一峰的 http://es6.ruanyifeng.com/#docs/promise 入门教程，还有就是上面提到的电子书。

HTML 5 Web Workers

什么是 Web Worker？
当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

创建 web worker 文件
现在，让我们在一个外部 JavaScript 中创建我们的 web worker。
在这里，我们创建了计数脚本。该脚本存储于 “demo_workers.js” 文件中：

var i=0;

function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}

timedCount();

以上代码中重要的部分是 postMessage() 方法 - 它用于向 HTML 页面传回一段消息。
注释：web worker 通常不用于如此简单的脚本，而是用于更耗费 CPU 资源的任务。
创建 Web Worker 对象
我们已经有了 web worker 文件，现在我们需要从 HTML 页面调用它。
下面的代码检测是否存在 worker，如果不存在，- 它会创建一个新的 web worker 对象，然后运行 “demo_workers.js” 中的代码：

if(typeof(w)=="undefined")
  {
  w=new Worker("demo_workers.js");
  }

然后我们就可以从 web worker 发生和接收消息了。
向 web worker 添加一个 “onmessage” 事件监听器：

1
2
3

w.onmessage=function(event){
document.getElementById("result").innerHTML=event.data;
};

当 web worker 传递消息时，会执行事件监听器中的代码。event.data 中存有来自 event.data 的数据。
终止 Web Worker
当我们创建 web worker 对象后，它会继续监听消息（即使在外部脚本完成之后）直到其被终止为止。
如需终止 web worker，并释放浏览器/计算机资源，请使用 terminate() 方法：

w.terminate();

完整的 Web Worker 实例代码
我们已经看到了 .js 文件中的 Worker 代码。下面是 HTML 页面的代码：
实例

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<br /><br />

<script>
var w;

function startWorker()
{
if(typeof(Worker)!=="undefined")
{
  if(typeof(w)=="undefined")
    {
    w=new Worker("demo_workers.js");
    }
  w.onmessage = function (event) {
    document.getElementById("result").innerHTML=event.data;
  };
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";
}
}

function stopWorker()
{
w.terminate();
}
</script>

</body>
</html>

异步脚本加载

一，阻塞性脚本

JavaScript在浏览器中被解析和执行时具有阻塞的特性，也就是说，当JavaScript代码执行时，页面的解析、渲染以及其他资源的下载都要停下来等待脚本执行完毕
浏览器是按照从上到下的顺序解析页面，因此正常情况下，JavaScript脚本的执行顺序也是从上到下的，即页面上先出现的代码或先被引入的代码总是被先执行，即使是允许并行下载JavaScript文件时也是如此。注意我们这里标红了”正常情况下”，原因是什么呢？我们知道，在HTML中加入JavaScript代码有多种方式，概括如下(不考虑require.js或sea.js等模块加载器)：
（1）正常引入：即在页面中通过\<script>标签引入脚本代码或者引入外部脚本
（2）通过document.write方法向页面写入\<script>标签或代码
（3）通过动态脚本技术，即利用DOM接口创建\<script>元素，并设置元素的src，然后再将元素添加进DOM中。
（4）通过Ajax获取脚本内容，然后再创建\<script>元素，并设置元素的text，再将元素添加进DOM中。
（5）直接把JavaScript代码写在元素的事件处理程序中或直接作为URL的主体

具体参考 http://www.jb51.net/article/77920.htm

二，脚本延迟运行

一般在JS页面延迟执行一些方法。可以使用以下的方法:

Window.setTimeout  
jQuery.delay
jQuery.queue和jQuery.dequeue

<script src="deferdemo.js" defer></script>加上 defer 等于在页面完全在入后再执行，相当于 window.onload ，但应用上比 window.onload 更灵活！

<script type="text/javascript" src="demo_async.js" async="async"></script>

使用async属性，浏览器会下载js文件，同时继续对后面的内容进行渲染
通常如果js不需要改变DOM结构时可以使用async进行异步加载（比如一些统计代码可以异步加载，因为此代码与页面执行逻辑无关，不会改变DOM结构）

SeaJS与RequireJS：
网上写amd和cmd的文章很多，当然也有很多都是误人子弟的片面的看法，所以还是推荐自己看官方文档多加尝试去理解。

“RequireJS 遵循的是 AMD（异步模块定义）规范，SeaJS 遵循的是 CMD （通用模块定义）规范”。
AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。

amd 规划 https://github.com/amdjs/amdjs-api/wiki/AMD-(%E4%B8%AD%E6%96%87%E7%89%88)

cmd 规范 https://github.com/seajs/seajs/issues/242

区别：

对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。不过 RequireJS 从 2.0 开始，也改成可以延迟执行（根据写法不同，处理方式不同）
CMD 推崇依赖就近，AMD 推崇依赖前置。

ECMAScript6 Moudle

历史上，JavaScript一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如Ruby的require、Python的import，甚至就连CSS都有@import
到了ES6，实现了模块化的功能，功能上基本可以取代 cmd和amd的规范，

模块的功能主要由两个命令构成，export和import，export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

export的写法，

// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;

export {firstName, lastName, year};
上面代码在export命令后面，使用大括号指定所要输出的一组变量。
import写法：
// main.js

import {firstName, lastName, year} from './profile';

function setName(element) {
  element.textContent = firstName + ' ' + lastName;
}

ES6模块加载的实质
ES6模块加载的机制，与CommonJS模块完全不同。CommonJS模块输出的是一个值的拷贝，而ES6模块输出的是值的引用。CommonJS模块输出的是被输出值的拷贝，也就是说，一旦输出一个值，模块内部的变化就影响不到这个值。
ES6模块的运行机制与CommonJS不一样，它遇到模块加载命令import时，不会去执行模块，而是只生成一个动态的只读引用。等到真的需要用到时，再到模块里面去取值，换句话说，ES6的输入有点像Unix系统的”符号连接“，原始值变了，import输入的值也会跟着变。因此，ES6模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块。

// mod.js
function C() {
  this.sum = 0;
  this.add = function () {
    this.sum = 1;
  };
  this.show = function () {
    console.log(this.sum);
  }
}

export let c = new C();
上面的脚本mod.js，输出的是一个C的实例。不同的脚本加载这个模块，得到的都是同一个实例。

// x.js
import {c} from './mod';
c.add();

// y.js
import {c} from './mod';
c.show();

// main.js
import './x';
import './y';