]怎么确保JavaScript的执行顺序 –之jQuery1.5.1与jQuery1.4.4的差异

2012-10-21

]如何确保JavaScript的执行顺序 –之jQuery1.5.1与jQuery1.4.4的差异我们发现jQuery.html函数在动态加载跨

]如何确保JavaScript的执行顺序 –之jQuery1.5.1与jQuery1.4.4的差异

我们发现jQuery.html函数在动态加载跨域JavaScript时，在Firefox和Opera中可以按照引入顺序执行，而在IE，Chrome和Safari中都不能确保执行顺序。

经过分析，我们发现jQuery.html在处理跨域静态JS文件时，并非采用的同步AJAX（也存在同源策略的限制），而是在head中添加script标签来完成的。

我们先来简单回顾下HTML源代码（test2_1.htm）：

<html>

<head>

??? <title></title>

??? <script src="js/jquery-1.4.4.js" type="text/javascript"></script>

??? <script>

??????? $(function(){

??????????? $('#container').html('<script src="http://test1.sanshi.me/jsorder/service.ashx?file=js/jquery-ui.js&delay=2000" type="text\/javascript"><\/script>' + '<script>alert(typeof(jQuery.ui));<\/script>');

??????? });

??? </script>

</head>

<body>

??? <div id="container">

??? </div>

</body>

</html>

在实际测试中，我发现如果使用jQuery1.5.1，那么得到的结果和使用jQuery1.4.4有些不同，请看下表：

test2_1.htm（jquery-1.4.4.js）

通过jQuery.html动态加载跨域JavaScript文件

test2_2.htm（jquery-1.5.1.js）

通过jQuery.html动态加载跨域JavaScript文件

Firefox 3.6