|
该文借鉴于此文
一、相关概念
1、单线程(sigle thread)
JavaScript是单线程语言。同一时刻只能执行一段代码，这是防止不同代码之前的冲突。对应的多线程语言有一堆，Java,C++等大多数语言都是多线程语言。
2、同步（synchronous）
代码按照顺序执行。一段代码执行完，才执行下一段代码。
3、异步（asynchronous）
代码不按照顺序执行。可以先执行后面一段代码，再执行前面一段代码；也可以先执行一段代码的一部分，再执行其他代码，再返回来执行该段代码。
4、阻塞
因为目前正在运行代码，所以其他的代码无法运行，只有等待目前的代码运行完毕，才能运行其他代码。
5、非阻塞
目前运行的代码被分成多部分，中间可以穿插其它代码先运行。
6、并发
同时发生。通过异步，高效利用CPU，看起来好像是高并发？
7、事件驱动(event drive)
JavaScript 的一个特点是事件驱动。前端常用的异步方案。在JavaScript Web前端开发中，需要处理各种事件，比如点击鼠标。需要在事件触发时才调用函数。
8、回调
Node.js中常用的异步方案。把函数当参数传递给其他函数，其它函数运行时进行调用。
9、任务队列（job queue）
所有的代码都需要在任务队列中进行排队执行。优先度高的任务可以插队。
10、事件循环
JS引擎的一个进程。当一个队列执行完，启动下一个队列。
二、任务队列和事件循环
任务队列和事件循环是JavaScript引擎管理代码顺序的机制。
事件循环（envent loop）又称内循环（inner loop）或事件轮询。
浏览器使用事件循环操控线程执行整个JavaScript代码。
事件循环是一个由浏览器无限期运行的单线程循环。
每当触发一个事件，浏览器就会将调用的函数加到任务队列进行排队。
任务队列中有多个任务。每一个任务有一个或多个回调函数（callback），前一个任务结束后，不是执行后一个任务，而是执行回调函数，后一个任务是不用等前一个任务结束就执行，所以程序的执行顺序与任务的排列顺序是不一致的、异步的。
事件循环执行完所有处理函数，便继续处理下一事件，不断重复。
三、实现异步的方法
1、事件模型（常用于Web前端，操作DOM事件，但串联麻烦）
最基础的异步，事件触发才调用函数，而不是根据代码出现的顺序
把函数赋值给事件，比如onload
代码运行到事件，会把函数加入队列，事件触发就会调用函数
常用于DOM事件，比如点击鼠标、点击键盘等事件
页面完成载入事件，再弹窗：
onload = funtion() {
alert("hello!")
}
使用addEventListener()绑定事件：
document.getElementById('start').addEventListener('click',startFn,false)
function startFn(){
//响应事件
}
JQ中绑定事件:
$('#start').on('click',start)
缺点：只能进行简单的交互，串联异步调用很麻烦，需要追踪事件对象，需要确保事件触发前绑定完毕
2、回调函数（常用于Node.js，毁掉地狱，不好维护）
回调不等于异步，回调只是一种调用函数的方法，Node.js标准库中的异步主要是回调函数的形式
把函数像参数一样传进另一个函数，并且在另一个函数中调用，为了方便理解，一般传入的参数一般命名为callback
当一个函数A作为参数传给另一个函数时B，那么这个函数A就叫做回调，B调用A函数的过程，也叫作回调
function f1(a,callback) {
console.log(a);
callback()
}
function f2() {
console.log("a callback");
}
f1(100,f2)
//一般会把回调函数直接写在使用的函数中，Node.js中充斥着这种写法:
function f1(a,callback) {
console.log(a)
callback()
}
f1(100,()=> {
console.log("a callback");
})
console.log('end');
//但是其实这样会写还是同步，一般不会自己写回调函数，自己无法处理任务队列问题，一般使用的是库里的函数，往里传函数，然后会自动放入队列
优点：比事件模型灵活，方便串联多个调用
在回调函数中，又嵌套其他函数
readFile('example.txt',function(err,contents) {
if(err) throw err
writeFile('example.txt',function(err) {
if(err) throw err
console.log('File was written!');
})
})
运行步骤：
1、先运行readline（），中途运行其他代码
2、等readline返回结果，返回内容和错误，再调用函数
3、调用的函数接受错误和成功，进一步处理
4、调用函数中还可以再使用其他回调函数，结果同理
（1）定时器中使用回调函数
回调函数常见于定时器，定时调用回调函数
定时器执行时会把任务放进任务队列末端，指定时间到了并且当前没有运行中的任务，才会执行回调
用户操作网页，触发的回调函数优先度最高，会插队在定时器的回调函数之前
function callback() {
console.log('Done');
}
console.log('before setTimeout()');
setTimeout(callback,0)//把callback函数放入任务队列
console.log('after setTimeout');
ajax中
$.ajax('http://baidu.com',{
sucess:function(res) {
//这里就是回调函数
}
})
（2）回调函数的缺点
回调函数容易串联，但是串联多的时候，不断的嵌套，会导致代码横向发展，难以理解和调试，被称为回调地狱
foo(val,function(err,val2) {
if(err) throw err
bar(err,function(err,val3) {
if(err) throw err
baz(err,function(err,val4) {
if(err) throw err
...
})
})
})
3、promise对象（为解决异步的对象，异步的基础）
详情请见我的另一个博客
4、asnyc（生成器函数的语法糖）
详情请见我另一个博客
|