工作，有关js代码段和ajax的执行顺序

今天在工作中遇到一些ajax函数执行顺序的事情=。=，记录一下，有点少，以后会对这边进行添加。

问题如下：

var temp="test";

Ajax1：

$.ajax({

temp="changed"

});

Ajax2：

$.ajax({

alert(temp);

});

结果是test。

所以ajax是并行的，至于执行的快与慢，要看响应的数据量的大小及后台逻辑的复杂程度。

解决方法：

（1）Ajax2()方法的执行放到Ajax1()的success回调函数的最后一行。

（2）Ajax1()的异步请求方法中，增加一个回调函数：complete : Ajax2

↑参考：为革命保护视力的博客

↓然后又了解了一下js代码的执行顺序，参考钱天兵的博客：http://www.tea119.com

js代码执行顺序：

JavaScript执行引擎并非一行一行地分析和执行程序，而是一段一段地分析执行的。而且在分析执行同一段代码中，定义式的函数语句会被提取出来优先执行。函数定义执行完后，才会按顺序执行其他代码。

例子1：

var hello = function(){

alert('hello,1');

}

hello();//第一次调用，输出“hello,1”

var hello = function(){

alert('hello,2');

}

hello();//第二次调用，输出“hello,2”

例子2：定义式的函数语句先执行了

function hello(){

alert('hello,1');

}

hello();//第一次调用，猜猜输出什么内容？

function hello(){

alert('hello,2');

}

hello();//第二次调用，猜猜输出什么内容？

在例子2中，两次调用都会输出相同的内容“hello,2”。同样是声明两个相同名称的函数，为什么调用的结果却不一样呢？

这就是JavaScript执行顺序导致的。JavaScript执行引擎并非一行一行地分析和执行程序，而是一段一段地分析执行的。而且在分析执行同一段代码中，定义式的函数语句会被提取出来优先执行。函数定义执行完后，才会按顺序执行其他代码。也就是说，在第一次调用hello函数之前，第一个函数语句定义的代码已经被第二个函数定义语句的代码覆盖了，这就是为什么在例子2中第一次调用hallo时，也会输出后面定义的函数内容的原因了。

但是一般人不会定义2个同名函数吧=。=，有小伙伴和我说这个是函数覆盖，我有点蒙所以我找了下面的一个说的比较清除的文章。

↓参考goodgirl1991的专栏

http://blog.csdn.net/goodgirl1991/article/details/50461962

JavaScript是一种描述型脚本语言，它不同于Java或C#等编译性语言,它不需要进行编译成中间语言,而是由浏览器进行动态地解析与执行。

相关术语：

1代码块：

alert("这是代码块一");

</script>

alert("这是代码块二");

</script>

JS是按照代码块来进行编译和执行的，代码块间相互独立，但变量和方法共享。例子：

alert(str);//因为没有定义str，所以浏览器会出错，下面的不能运行

alert("我是代码块一");//没有运行到这里

var test = "我是代码块一变量";

</script>

alert("我是代码块二"); //这里有运行到

alert(test); //弹出"我是代码块一变量"

</script>

上面的代码中代码块一中运行报错，但不影响代码块二的执行，这就是代码块间的独立性，而代码块二中能调用到代码一中的变量，则是块间共享性。

2声明式函数与赋值式函数

JS中的函数定义分为两种：声明式函数与赋值式函数。

function Fn(){ //声明式函数 }

var Fn = function{ //赋值式函数 }

</script>

声明式函数与赋值式函数的区别在于：在JS的预编译期，声明式函数将会先被提取出来，然后才按顺序执行js代码。

3预编译期和执行期

事实上，JS的解析过程分为两个阶段：预编译期(预处理)与执行期。
预编译期JS会对本代码块中的所有声明的变量和函数进行处理（类似与C语言的编译），但需要注意的是此时处理函数的只是声明式函数，而且变量也只是进行了声明但未进行初始化以及赋值（即只是分配了内存）。

var a=100;

var b=true;

function test(){

alert(a);

alert(b);

b=false;

alert(b);

var a=200;

alert(a/2);

alert(++Math.PI);

alert(Math.PI++);

}

test();

</script>

这段代码执行后的效果就是首先弹出undefined、然后弹出true，接着再弹出其他，也就是说，第一行alert（a）执行时，a并未赋值，而b已被赋值为了true。这是为什么？涉及到两个知识点：

变量的作用域

js代码的执行顺序

首先，js要预编译，预编译的过程中，为每个变量分配了内存。

第二步，按照代码的顺序执行代码：

第一行，为全局变量a赋值

第二行为局部变量b赋值

第三行进入了函数test，则由于局部变量会在函数内部覆盖同名的全局变量,故此时的状态便是a未赋值，b的值为true

第四行，弹出a值，此时未赋值的a当然要弹出undefined啦。（执行进入函数后按顺序执行函数内容）

注意，当我们仅仅定义了函数，而未调用时，函数只是被声明而已，并不执行。

总结:

step 1. 读入第一个代码块。
step 2. 做语法分析，有错则报语法错误（比如括号不匹配等），并跳转到step5。
step 3. 对var变量和function定义做“预编译处理”（永远不会报错的，因为只解析正确的声明）。
step 4. 执行代码段，有错则报错（比如变量未定义）。
step 5. 如果还有下一个代码段，则读入下一个代码段，重复step2。
step6. 结束。

而根据HTML文档流的执行顺序，需要在页面元素渲染前执行的js代码应该放在前面的<script>代码块中，而需要在页面元素加载完后的js放在元素后面，body标签的onload事件是在最后执行的。^_^

我目前想到最好的办法，防止因为ajax异步造成的取空数据等状况，不是将ajax定义成同步的，而是在涉及到界面操作的地方，在发起请求前弹窗，请求结束后才能使界面可操作。

涉及到没有界面操作的，只能在ajax请求成功后的回调函数中调用相关其他ajax方法。

posted on 2017-07-10 17:33 不那么敷衍阅读(1698) 评论(0) 编辑收藏举报

刷新页面返回顶部

工作，有关js代码段和ajax的执行顺序

导航

公告