关于 JS 的脚本执行及 SetTimeOut延迟时间为0的详解

关于 JS 的脚本执行及 SetTimeOut延迟时间为0的详解

大海和星辰之间，是我们征途的方向；

js是一种描述型的语言，由浏览器动态的解析与执行；严格来讲，js是单线程执行的，也就是说js脚本运行顺序是一个接一个执行；由 John Resig 的 How JavaScript Timers Work 可以知道，现有的 JavaScript 引擎是单线程处理任务的。它把任务放到队列中，不会同步去执行，必须在完成一个任务后才开始另外一个任务。

下面介绍几种不同方式的的执行：

1.函数定义方式不同：

//变量赋值式
var aaa = function(){ ...};
//定义式
function bbb(){...};

页面加载过程中，浏览器会对页面上或载入的每个js代码块(或文件)进行扫描，如果遇到定义式函数，则进行预处理(类似于C等的编译)，处理完成之后再开始由上至下执行；遇到赋值式函数，则只是将函数赋给一个变量，不进行预处理，待调用到的时候才进行处理。下面举个简单的例子：

aaa();//可以运行；
var aaa = function(){ ...};
bbb();//bbb未定义报错；
function bbb(){...};

2. 不同代码块及js文件的处理

“代码块”是指一对script标签包裹着的js代码，文件就是指脚本文件;浏览器对每个块或文件进行独立的扫描，然后对全局的代码进行顺序执行。所以，在一个块(文件)中，函数可以在调用之后进行“定义式”定义；但在两个块中，定义函数所在的块必须在函数被调用的块之前。
很绕口，看例子好了：

    <script type="text/javascript"> 
    Fn(); //Fn未定义
    </script> 
    <script type="text/javascript"> 
    function Fn(){ 
    alert("Hello World!"); 
    } 
    </script> 

3. 函数和变量提升及覆盖

fn(); 
function fn(){ 
alert(1); 
} 
function fn(){ 
alert(2); 
} 
// 还是弹出：“2” 

console.log(a);//存在a变量，但a为undefined;
console.log(b);//存在b变量，但b为undefined;
var a = 1;
var b = function(){};

4.函数的执行，从上到下；

先来个简单代码看一下

function fn1(){ 
alert("我先调用") 
} 
function fn2(){ 
alert("我后调用"); 
} 
fn1(); 
fn2(); 
// 先弹出：“我先调用”， 
// 后弹出：“我后调用” 

上面代码按调用顺序依次在执行队列中执行；再来个加回调函数的看一下；

function fn1(){ 
setTimeout(function(){ 
alert("我先调用") 
},1000); 
} 
function fn2(){ 
alert("我后调用"); 
} 
fn1(); 
fn2(); 
// 先弹出：“我后调用”， 
// 1秒后弹出：“我先调用” 

看上去，fn2()和延时程序是分两个过程再走，但其实，这是JavaScript中的“回调”机制在起作用，类似于操作系统中的“中断和响应” —— 延时程序设置一个“中断”，然后执行fn2()，待1000毫秒时间到后，再回调执行fn1()。
同样，我们常用的onload方法，是在body加载完成之后，回调执行onload中的函数。

5.回调函数

关于回调函数，网上有很多解释：

比较简单易懂的解释是：你到一个商店买东西，刚好你要的东西没有货，于是你在店员那里留下了你的电话，过了几天店里有货了，店员就打了你的电话，然后你接到电话后就到店里去取了货。在这个例子里，你的电话号码就叫回调函数，你把电话留给店员就叫登记回调函数，店里后来有货了叫做触发了回调关联的事件，店员给你打电话叫做调用回调函数，你到店里去取货叫做响应回调事件。回答完毕。 来自：知乎 用户：常溪玲 链接：[https://www.zhihu.com/question/19801131/answer/13005983]

还有其他比较好的解释：
为什么要用回调呢?比如我要写一个子模块给你用, 来接收远程socket发来的命令.当我接收到命令后, 需要调用你的主模块的函数, 来进行相应的处理.但是我不知道你要用哪个函数来处理这个命令, 我也不知道你的主模块是什么.cpp或者.h, 或者说, 我根本不用关心你在主模块里怎么处理它, 也不应该关心用什么函数处理它…… 怎么办?

使用回调!

—— lone wolf

使用回调函数实际上就是在调用某个函数（通常是API函数）时，将自己的一个函数（这个函数为回调函数）的地址作为参数传递给那个函数。而那个函数在需要的时候，利用传递的地址调用回调函数，这时你可以利用这个机会在回调函数中处理消息或完成一定的操作。

—— 某专家

回调函数，就是由你自己写的。你需要调用另外一个函数，而这个函数的其中一个参数，就是你的这个回调函数名。这样，系统在必要的时候，就会调用你写的回调函数，这样你就可以在回调函数里完成你要做的事。

—— 绿叶

---

分割线….

---

接下来：说一下 回掉函数：延迟时间为0的setTimeout； 在实践中，setTimeout 会在其完成当前任何延迟事件的事件处理器的执行，以及完成文档当前状态更新后，告诉浏览器去启用 setTimeout 内注册的函数。 其实，这是一个把需要执行的任务从队列中跳脱的技巧；
上代码：

vm.typeList[index].task.splice(key,1);//编辑form表单中的某一数据；
vm.typePost(ele)//执行转化form表事件typePost();

typePost:function(ele,index){
    var vm = this
    var formData = $('#'+ele).serialize();
}

博主用的技术栈是VUE，如上面代码，先执行对数组的切割，但是在完成逻辑处理之后如果此时执行；form初始化，此时的Vue还未更新变更的数据的dom节点，所以，此时执行会导致form表单化的数据未变更；此时，我们如果加一个条件，当Vue完成dom节点渲染再执行form表单序列化操作，我们会想到回掉函数，如下；

    vm.typeList[index].task.splice(key,1);
    setTimeout(function(){
        vm.typePost(ele)
    }, 0);

setTimeout可以把任务从某个队列中跳脱成为新队列，因而能够得到期望的结果。

这才是延迟事件为 0 的setTimeout的真正目的。