转 js中的同步和异步 _

自从读了研后，走上了学术之路，每天除了看论文就是做实验，最后发现自己还是喜欢开发呀，于是我又重回前端啦~

隔了这么久没学前端，好像很多东西都忘了不少，而且不得不说前端的技术更新是真的快，接下来将会重新拾起前端的一点一滴，首先进入的是js的同步和异步的世界~

一、单线程

（1）单线程的概念

如果大家熟悉java，应该都知道，java是一门多线程语言，我们常常可以利用java的多线程处理各种各样的事，比如说文件上传，下载等，而JavaScript是否也可以支持多线程呢？

答案是否定的，JavaScript是一门单线程的语言，因此，JavaScript在同一个时间只能做一件事，单线程意味着，如果在同个时间有多个任务的话，这些任务就需要进行排队，前一个任务执行完，才会执行下一个任务，比如说下面这段代码

（1）所有同步任务都在主线程上执行，行成一个执行栈
（2）主线程之外，还存在一个任务队列，只要异步任务有了结果，就会在任务队列中放置一个事件
（3）一旦执行栈中的所有同步任务执行完毕，系统就会读取任务队列，看看里面还有哪些事件，那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行
（4）主线程不断的重复上面的第三步

三、异步编程

那么，怎么才能实现异步编程，写出性能更好的代码呢，下面有几种方式

（1）回调函数

回调函数是实现异步编程最简单的方法啦，回调函数我们在使用ajax时应该用的很多啦，其实在使用ajax时，我们就用到了异步

1 2 3 4 var req = new XMLHttpRequest(); req.open("GET",url); req.send(null); req.onreadystatechange=function(){}

req.send（）方法是 AJAX 向服务器发生数据，它是一个异步任务，而 req.onreadystatechange（）属于事件回调，借由浏览器的HTTP请求线程发起对服务器的请求，在请求得到响应之后触发请求完成事件，将回调函数推入事件队列等待执行

其实像setTimeout，还有我们平时为元素绑定监听事件，和上面说的道理也是一样的

回调函数的优点是简单、容易理解和部署，缺点是不利于代码的阅读和维护，各个部分之间高度耦合（Coupling），流程会很混乱，而且每个任务只能指定一个回调函数

（2）Promise

一直以来，JavaScript处理异步都是以callback的方式，在前端开发领域callback机制几乎深入人心，近几年随着JavaScript开发模式的逐渐成熟，CommonJS规范顺势而生，其中就包括提出了Promise规范，Promise完全改变了js异步编程的写法，让异步编程变得十分的易于理解，同时Promise也已经纳入了ES6，而且高版本的chrome、firefox浏览器都已经原生实现了Promise，只不过和现如今流行的类Promise类库相比少些API

Promise包括以下几个规范

一个promise可能有三种状态：等待（pending）、已完成（fulfilled）、已拒绝（rejected）
一个promise的状态只可能从“等待”转到“完成”态或者“拒绝”态，不能逆向转换，同时“完成”态和“拒绝”态不能相互转换
promise必须实现then方法（可以说，then就是promise的核心），而且then必须返回一个promise，同一个promise的then可以调用多次，并且回调的执行顺序跟它们被定义时的顺序一致
then方法接受两个参数，第一个参数是成功时的回调，在promise由“等待”态转换到“完成”态时调用，另一个是失败时的回调，在promise由“等待”态转换到“拒绝”态时调用，同时，then可以接受另一个promise传入，也接受一个“类then”的对象或方法，即thenable对象

在使用Promise时，我们需要检测一些浏览器是否支持Promise

function wait(time) {
    return new Promise(function(resolve,reject) {
        setTimeout(resolve,time);
    });
}

这个时候我们就可以使用Promise处理异步任务啦

wait(1000).then(function(){
    console.log(1);
})

上面这个例子表示1秒后输出1，同样的道理，我们可以使用Promise进行更加复杂的操作，关于更多的操作，就不继续说啦，关于异步的实现，其实还有其它的一些方法，但是因为上面说的这两种方法用的比较多，所以就只说上面这两种了

__EOF__

本文作者： Yellow-ice
本文链接：
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【 Yellow_ice
关注 - 2
粉丝 - 57 我在关注他上一篇：
下一篇：

JavaScript编程简历笔试面试题

转 js中的同步和异步 _

相关

标签