JavaScript中的同步与异步

前言

平日的编码中,你能列出你常用的异步编码?怎么理解同步与异步?

如果仅仅停留在文字上的理解,个人觉得有口无心,每当屡屡面试时,这都是一个常问的话题,牵扯到的是事件的执行顺序,任务队列,在js当中对于异步处理任务,是一个非常重要知识.

如何看待同步?

由于js是单线程的,换句话说,就是,在同一段时间内,只能处理一个任务,干一件事情,然后再去处理下一个任务,浏览器解析网页中的js代码,是逐行进行读取,从上至下执行的 实例场景:打电话就是一个同步的例子,必须等待打完了一个,然后再接着打下一个的

在如何看待同步之前,有必要了解下计算机中两个专业术语概念,就是进程和线程

进程: 它是系统进行资源分配和调度的一个独立单位,具有一定独立功能的程序关于某个数据集合上的一次运行活动,可以粗俗的理解为主(大)任务

**线程:**安排CPU执行的最小单位,可以理解为子任务

**关系:**线程可以视作为进程的子集,一个进程可以有多个线程并发执行

区别:进程和线程的主要差别在于,它们是不同的操作系统资源管理方式。进程有独立的地址空间，一个进程崩溃后，在保护模式下不会对其它进程产生影响，而线程只是一个进程中的不同执行路径。

线程有自己的堆栈和局部变量，但线程之间没有单独的地址空间，一个线程死掉就等于整个进程死掉，所以多进程的程序要比多线程的程序健壮，但在进程切换时，耗费资源较大，效率要差一些。

但对于一些要求同时进行并且又要共享某些变量的并发操作，只能用线程，不能用进程

在后文中会用具体的代码,来认识同步的

为什么js是单线程?

JavaScript之所以设计为单线程,这与它的用途有关。它作为浏览器脚本语言，主要用途是负责与页面的交互，以及操作DOM(添加,删除等),它只能是单线程的，否则它就会带来很复杂的同步问题。

比如，你在网页上有若干个操作,也就是在主线程中有多个任务，一个线程任务是在某个DOM节点上添加内容，另一个线程任务是删除这个节点，这时浏览器应该以哪个线程为准？

所以，为了避免复杂性，从一诞生，JavaScript就是单线程的，这已经是这门语言的核心特征，将来也不会改变

而单线程，是指在JS引擎中负责解释和执行JavaScript代码的线程只有一个,但浏览器是多线程的,而js是单线程的,两者并不矛盾,浏览器只是js宿主的运行环境

怎么理解异步?

浏览器是多线程的,但解析我们的js代码,却是单线程的,但有些任务是需要消耗时间的（比如:上传,读取文件,下载等）,如果按照普通的同步方式,就会阻塞我们的代码，主线程的任务没有做完,那么下面的任务将不会执行

实例场景:给女票打电话,必须等待到对方接听,有反应后,才能继续后面的热恋,你得一直等待,干不了别的事情,在那苦等的耗着

但发短信,微信就是一个异步的例子,也许对方正忙,没有及时回复,你不必等待对方及时回应,你仍可以继续干其他的事情。等到对方看见了,便会回应你.

单线程中有一些任务需要耗费一些时间,让用户去等待确认,把一些耗时的事情任务通过新开的线程方式来实现,浏览器会针对对于那些耗时间的任务,会开一些新的进程单独去处理

主线程继续往下走,那么这个时候,它既不影响后续代码的执行,同时还能通过另外的线程去做事,然后等待另外的线程做完事之后

比如说:通过回调,事件的方式去通知我们的主线程,然后把Ajax等异步处理要做的事情,在推到主线程当中进行执行

那有哪些东西是需要重新开线程的?既然js是单线程的，那么他是如何是实现异步操作的？我们把这些任务称为:异步任务 同一段时间内可以做多个任务,例如

setTimeout
setInterval
ajax
...

/**
 * 
 * @authors 川川 (itclancode@163.com)
 * @ID suibichuanji
 * @weChatNum 微信公众号:itclancoder
 * @version $Id$
 */
var http = require(‘http‘) // 使用http对象来引用http模块
var url = require(‘url‘);
var jsonData = { "name": "川川", "age": 20, "job": "weber" };
var app = http.createServer(function(req, res) { // 使用http模块的createServer方法来创建用于接收HTTP客户端请求并返回的响应的HTTP服务器应用程序,在createServer方法中定义了当服务器接收到客户端请求时所执行的回调函数,在该回调函数中指定当服务器接收到客户端请求时所要执行的处理,第一个参数req代表的是客户端请求对象,第二个参数代表服务器端所做出的响应对象
    res.writeHead(200, {
        ‘Content-Type‘: ‘application/json;charset=utf-8‘,
        ‘Access-Control-Allow-Credentials‘: true,
        ‘Access-Control-Allow-Origin‘: ‘*‘ //可以是*，也可以是跨域的地址
    })



    // url.parse 方法来解析 URL 中的参数
    var pathname = url.parse(req.url, true).pathname;
    if (pathname == ‘/index‘) {
        setTimeout(function() {
            res.end(JSON.stringify(jsonData)); // 通过响应对象res的end方法输出一json对象,并结束响应流
        }, 3000)
    }

})

app.listen(8083, "127.0.0.1"); // createServer方法将返回被创建的HTTP服务器对象,我们使用该对象的listen方法指定服务器使用端口及服务器绑定的地止,并对该端口进行监听

console.log(‘server running at http:127.0.0.1:8083/‘);

将这段代码命名为server.js,然后在当前目录下执行node server.js,就会启动后端的服务 在浏览器端地止栏:输入http://127.0.0.1:8083/index

那么在浏览器前端: 如果想要把这个数据添加到浏览器前端页面上,那该怎么操作? 如下代码所示:

"utf-8">
"X-UA-Compatible" content="IE=edge,chrome=1">
"description" content="">
"keywords" content="">
"" rel="stylesheet">
"btn">按钮
        
"list-wrap">
        
"box">

        

console.log(‘1‘)
setTimeout(function(){
 console.log(‘2‘)
},0)
console.log(‘3‘)

var fs = require(‘fs‘);
var myNumber = undefined;
function addOne(callback){
   fs.readFile(‘number.txt‘, function doneReading(err, fileContents){
       myNumber = parseInt(fileContents);
       myNumber++;
       callback();
  })
}
function logMyNumber(){
   console.log(myNumber);
}
addOne(logMyNumber)