java script处理异步的几种方式

java script语言的执行环境是"单线程"（single thread，就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务，以此类推）。

这种模式的好处是实现起来比较简单，执行环境相对单纯；坏处是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。常见的浏览器无响应（假死），往往就是因为某一段java script代码长时间运行（比如死循环），导致整个页面卡在这个地方，其他任务无法执行。

为了解决这个问题，java script语言将任务的执行模式分成两种：同步（Synchronous）和异步（Asynchronous）。

“同步模式" 就是上一段的模式，后一个任务等待前一个任务结束，然后再执行，程序的执行顺序与任务的排列顺序是一致的、同步的；"异步模式"则完全不同，每一个任务有一个或多个回调函数（callback），前一个任务结束后，不是执行后一个任务，而是执行回调函数，后一个任务则是不等前一个任务结束就执行，所以程序的执行顺序与任务的排列顺序是不一致的、异步的。

“异步模式" 非常重要。在浏览器端，耗时很长的操作都应该异步执行，避免浏览器失去响应，最好的例子就是Ajax操作。在服务器端，"异步模式"甚至是唯一的模式，因为执行环境是单线程的，如果允许同步执行所有http请求，服务器性能会急剧下降，很快就会失去响应。

一、回调函数(callback)

A callback is a function that is passed as an argument to another function and is executed after its parent function has completed.

翻译：回调是一个函数被作为一个参数传递到另一个函数里，在那个函数执行完后再执行。（ 也即：B函数被作为参数传递到A函数里，在A函数执行完后再执行B ）

假定有两个函数f1和f2，后者等待前者的执行结果。
f1();
f2();

如果f1是一个很耗时的任务，可以考虑改写f1，把f2写成f1的回调函数。
function f1(callback){
　　setTimeout(function () {
　　　　// f1的任务代码
　　　　callback();
　　}, 1000);
}
// 执行
f1(f2)

采用这种方式，我们把同步操作变成了异步操作，f1不会堵塞程序运行，相当于先执行程序的主要逻辑，将耗时的操作推迟执行。

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

注意 区分 回调函数和异步

回调并不一定就是异步。他们自己并没有直接关系。

简单区分 同步回调 和 异步回调

同步回调 ：

实例代码
function A(callback){
    console.log("I am A");
    callback();  //调用该函数
}
function B(){
  console.log("I am B");
}
A(B);

异步回调：因为js是单线程的，但是有很多情况的执行步骤（ajax请求远程数据，IO等）是非常耗时的，如果一直单线程的堵塞下去会导致程序的等待时间过长页面失去响应，影响用户体验了。

如何去解决这个问题呢，我们可以这么想。耗时的我们都扔给异步去做，做好了再通知下我们做完了，我们拿到数据继续往下走。
var xhr = new XMLHttpRequest();
xhr.open('POST', url, true);  //第三个参数决定是否采用异步的方式
xhr.send(data);
xhr.onreadystatechange = function(){
    if(xhr.readystate === 4 && xhr.status === 200){
      ///do something
    }
}

上面是一个代码，浏览器在发起一个ajax请求，会单开一个线程去发起http请求，这样的话就能把这个耗时的过程单独去自己跑了，在这个线程的请求过程中，readystate 的值会有个变化的过程，每一次变化就触发一次 onreadystatechange 函数，进行判断是否正确拿到返回结果。

image-20190306091707117

之前在学习 nodejs时也会遇到这样的问题
var fs=require('fs')

function getMime(){
 
    fs.readFile('data.json',function(err,data){
        return data;
    })
   
}
console.log(getMime());  /*由于异步操作没有拿到数据，如何解决，通过异步操作*/

解决的办法是
var fs=require('fs');
function getMime(callback){
    fs.readFile('data.json',function(err,data){
        callback(data);
    })
}
getMime(function(result){
    console.log(result.toString());
})

二、事件监听

采用事件驱动模式。

任务的执行不取决代码的顺序，而取决于某一个事件是否发生。

监听函数有：on，bind，listen，addEventListener，observe

还是以f1和f2为例。首先，为f1绑定一个事件（采用jquery写法）
f1.on('done',f2);

上面代码意思是，当f1发生done事件，就执行f2。

然后对f1进行改写：
function f1(){
    settimeout(function(){
      //f1的任务代码
      f1.trigger('done'); 
    },1000);
}

f1.trigger('done')表示，执行完成后，立即触发done事件，从而开始执行f2.

这种方法的优点：比较容易理解，可以绑定多个事件，每一个事件可以指定多个回调函数，而且可以去耦合，有利于实现模块化。

这种方法的缺点：整个程序都要变成事件驱动型，运行流程会变得不清晰。

事件监听方法：

（1）onclick方法
element.onclick=function(){
  //处理函数
}

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

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

例如：
element.onclick=handler1;
element.onclick=handler2;
element.onclick=handler3;