浅析 ~ Javascript函数执行顺序

参考文档：

https://www.cnblogs.com/CBDoctor/p/3745246.html

https://www.cnblogs.com/fliu/articles/5246113.html?tdsourcetag=s_pctim_aiomsg

一、Javascript代码整体书写位置：

浏览器加载javascript有个特点，即：页面一旦打开载入之后立即就会执行（先编译后执行，”先编译后执行”本篇文章也会介绍），所以在没有window.onload()或者document.ready()事件时，若JavaScript写在了html文档之前，则JavaScript中对DOM树的操作，可能会影响DOM树的结构，基本上来说，浏览器都会报错说对象找不到。因为Javascript执行时，后面的HTML被阻塞住了，对DOM树进行操作时还没有后面的DOM结点。所以程序也就报错了。因为浏览器在执行完javascript后才能继续加载下面的HTML内容。也就是说，浏览器下载并执行JavaScript的过程会阻塞DOM树的继续建立。

由于JavaScript通常需要操作DOM，所以，一般把JavaScript放在后引入。若需要在中引入，可以通过修改window.onload()或者document.ready()事件，强制等到DOM加载完成后再执行相关函数。

二、含有多个

至于对活动对象的理解：

“预编译”的操作：首先会创建一个当前执行环境下的活动对象，并将那些用var声明的变量设置为活动对象的属性，但是此时这些变量的赋值都是undefined，并将那些以function定义的函数也添加为活动对象的属性，而且它们的值正是函数的定义。

例：（重复的var声明会被忽略掉，但是重复的function声明会覆盖掉前面的声明）

function csdn(){
    console.log("猪猪传奇");
}
function csdn(){
    console.log("小猪传奇");
}
csdn();

这时，控制台打印输出的是 –> 小猪传奇

（二）javascript执行阶段：

首先，javascript程序执行过程中是从上到下逐行地被解释的。

严格意义上来说，javascript没有多线程的概念，所有的程序都是单线程依次执行的。（对于线程的概念，参考java中对线程的介绍，通俗的说，就是一个流水线，而多线程就是指多个流水线）

所谓”单线程”，就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务，以此类推。这样会引起服务器崩溃。

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

“同步模式”就是普通的单线程模式，后一个任务等待前一个任务结束，然后再执行，程序的执行顺序与任务的排列顺序是一致的、同步的；

“异步模式”则完全 不同，每一个任务有一个或多个回调函数（callback { 所谓回调函数，通俗的普通的就是指，程序执行完成后，下一个执行的函数，本人最初接触是在css动画中，详情可见我的另一篇博客~JQuery动画部分函数操作汇总，在动画队列时接触了回调函数的概念 }），前一个任务结束后，不是执行后一个任务，而是执行回调函数，后一个任务则是不等前一个任务结 束就执行，所以程序的执行顺序与任务的排列顺序是不一致的、异步的。

（一）同步模式：

所谓同步模式就是按照程序文档书写顺序，一行一行的向下执行，当然，即使函数声明了，没有调用函数，也没有用。

注意，这时候有一个立即执行函数的概念，例：

如果一个程序这样写：
for(var i=0;i<=3;i++)
{
    setTimeout(function(){console.log(i)},0);
}
//想要实现的效果是：依次输出0、1、2、3。
//但这个时候因为：for循环是一个任务，setTimeout()又是一个任务，
//这时候setTimeout()就会加入到任务队列中去，等待for循环完全执行完毕之后，
//才进行setTimeout()这个任务，但因为这个时候，i 已经自增为4了，所以会连续输出四个4。

而解决这个问题的方法就是立即执行函数：

//将var变为let
for(let i=0; i<=3; i++){
  setTimeOut(function(){
    console.log(i); //输出的结果为1，2，3
  },0);
}

//用自执行函数进行包裹
for(var i=0; i<=3; i++){
  !function(i){
    setTimeOut(function(){
      console.log(i); //输出的结果为1，2，3
    },0);
  }(i)
}

（二）异步模式：

“异步模式”非常重要。在浏览器端，耗时很长的操作都应该异步执行，避免浏览器失去响应，最好的例子就是Ajax操作。

在服务器端，”异步模式”甚至是唯一的模式，因为执行环境是单线程的，如果允许同步执行所有http请求，服务器性能会急剧下降，很快就会失去响应。

异步模式的四种方法：

（一）回调函数（异步编程的最基本的方法）

    function csdn(callback){
        setTimeout(function(){              
            callback();
            },2000);
        for(let i=0;i<50000;i++)
        console.log("猪猪传奇");
    }
    function zzcq(){
        console.log("小猪传奇");
    }
    csdn(zzcq);

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

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

上面的这个例子，解释一下个人理解（因为本人也是一个小白）：

首先setTimeout()函数本身就是一个异步函数，并且这个方式是由同步操作转换过来的，所以setTimeout()函数应该写在for循环的上面，这样setTimeout()函数先进入线程，等待时间期间，会执行后面的for循环，时间到了之后就会执行setTimeout()函数（上面这种方法，据说没人用了已经）

当然最最普通的回调函数是这个样子的，例：

    function csdn(callback){
        for(let i=0;i<50000;i++)
        console.log("猪猪传奇");
        callback();
    }
    function zzcq(){
        console.log("小猪传奇");
    }
    csdn(zzcq);

表示在csdn()执行完毕之后执行zzcq()

（二）事件调用

1>另一种思路是采用事件驱动模式。任务的执行不取决于代码的顺序，而取决于某个事件是否发生。

还是以f1和f2为例。首先，为f1绑定一个事件（这里采用的jQuery的写法）。

f1.on('done', f2);

上面这行代码的意思是，当f1发生done事件，就执行f2。然后，对f1进行改写：

　　function f1(){

　　　　　　// f1的任务代码

　　　　　　f1.trigger(‘done’);

　　}

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

这种方法的优点是比较容易理解，可以绑定多个事件，每个事件可以指定多个回调函数，而且可以”去耦合”（Decoupling），有利于实现模块化。缺点是整个程序都要变成事件驱动型，运行流程会变得很不清晰。

2>还有就是纯粹的各种JQuery事件调用函数

（详情请见我的另一篇博客~JQuery函数操作汇总事件角度）

（三）发布/订阅

我们假定，存在一个”信号中心”，某个任务执行完成，就向信号中心”发布”（publish）一个信号，其他任务可以向信号中心”订阅”（subscribe）这个信号，从而知道什么时候自己可以开始执行。这就叫做”发布/订阅模式”（publish-subscribe pattern），又称”观察者模式”（observer pattern）。

这个模式有多种实现，下面采用的是Ben Alman的Tiny Pub/Sub，这是jQuery的一个插件。

1>首先，f2向”信号中心”订阅”done”信号。

jQuery.subscribe("done", f2);//提交订阅

2>然后，f1进行如下改写：

function f1(){

　　　　　　// f1的任务代码

　　　　　　jQuery.publish("done");//发布信号

　　}

jQuery.publish(“done”)的意思是，f1执行完成后，向”信号中心”jQuery发布”done”信号，从而引发f2的执行。

此外，f2完成执行后，也可以取消订阅（unsubscribe）。

jQuery.unsubscribe("done", f2);

这种方法的性质与”事件监听”类似，但是明显优于后者。因为我们可以通过查看”消息中心”，了解存在多少信号、每个信号有多少订阅者，从而监控程序的运行。

（四）Promises对象

Promises对象是CommonJS工作组提出的一种规范，目的是为异步编程提供统一接口。

简单说，它的思想是，每一个异步任务返回一个Promise对象，该对象有一个then方法，允许指定回调函数。比如，f1的回调函数f2,可以写成：

f1().then(f2);

f1要进行如下改写（这里使用的是jQuery的实现）：

function f1(){

　　　　var dfd = $.Deferred();

　　　　　　// f1的任务代码

　　　　dfd.resolve();

　　　　return dfd.promise;

　　}

这样写的优点在于，回调函数变成了链式写法，程序的流程可以看得很清楚，而且有一整套的配套方法，可以实现许多强大的功能。

比如，指定多个回调函数：

f1().then(f2).then(f3);

再比如，指定发生错误时的回调函数：　　

f1().then(f2).fail(f3);

而且，它还有一个前面三种方法都没有的好处：如果一个任务已经完成，再添加回调函数，该回调函数会立即执行。所以，你不用担心是否错过了某个事件或信号。这种方法的缺点就是编写和理解，都相对比较难。