栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

如何确保JavaScript的执行顺序

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

如何确保JavaScript的执行顺序

为了更好的测试这个过程,我写了一个简单的HTTP处理程序页面 service.ashx,它可以接受两个参数:

1.      file,需要返回文件的服务器端路径。

2.      delay,延迟一定时间后再返回本次HTTP请求(毫秒)。

一个典型的页面比如:./service.ashx?file=js/jquery-ui.js&delay=2000,表示延迟2秒钟后再返回服务器端的js/jquery-ui.js文件。

 

service.ashx 的关键代码如下:

public void ProcessRequest(HttpContext context)

{

    int delay = 0;

    if (!String.IsNullOrEmpty(context.Request["delay"]))

    {

        delay = Convert.ToInt32(context.Request["delay"]);

    }

    if (delay > 0)

    {

        System.Threading.Thread.Sleep(1000);

    }

 

    string filePath = context.Request["file"].ToString();

    string fileContent = String.Empty;

    using (StreamReader sr = new StreamReader(context.Server.MapPath(filePath)))

    {

        fileContent = sr.ReadToEnd();

    }

 

    if (filePath.EndsWith(".js"))

    {

        context.Response.ContentType = "application/x-javascript";

    }

    else

    {

        context.Response.ContentType = "text/plain";

    }

    context.Response.Write(fileContent);

}

 

 

2.     通过script标签直接引入Javascript(test1.htm)

首先我们分析下在标签中顺序引入Javascript的情况。test1.htm的页面源代码如下:

   

   

 

我们分别在各种浏览器中测试这个例子:

 

test1.htm

通过script标签直接引入Javascript

Firefox   3.6


IE 8


Chrome   10


Safari   4

Opera   11

 

可以看出各个主流浏览器的行为一致。虽然jQueryUI在服务器延迟了2秒钟再返回,但是后引入的内联Javascript还是等待了2秒,等前面引入的Javascript执行完毕才执行。这也是著名的Javascript顺序执行的特性。

 

3.     通过Javascript添加script标签(test3.htm)

我们首先定义一个addscript函数,用来引入外部或者内联Javascript。test3.htm的页面源代码如下:

   

   

   

   

   

 

我们分别在各种浏览器中测试这个例子:

 

test3.htm

通过Javascript添加

   

   

   

 

此时所有浏览器中的行为一致:

 

test4.htm

通过回调函数解决动态添加Javascript的顺序问题

Firefox   3.6


IE 8


Chrome   10


Safari   4

Opera   11

 

 

5.     方案二,使用jQuery的html函数动态添加Javascript

jQuery的html函数用来更新一个DOM片段,我们可以很方便的通过这个函数来动态加载Javascript,请看示例test2.htm:

   

   

   

   

   

 

此时,各个浏览器中的行为一致:

 

test2.htm

通过jQuery的html函数解决动态添加Javascript的顺序问题

Firefox   3.6


IE 8


Chrome   10


Safari   4

Opera   11

 

6.     后记

为什么jQuery的html函数能够确保动态加载Javascript的执行顺序呢?

 

我们知道通过简单的 .innerHTML 更新DOM节点,是不会让其中的Javascript的执行,我们可以简单的把这个例子的源代码改成:

$('#container')[0].innerHTML = '' + '';

这种情况下jQueryUI根本不会加载。

 

那么jQuery是如果做到的呢?下篇文章我们会追根溯源,详细分析jQuery源代码,请继续浏览: 如何确保Javascript的执行顺序 – 之jQuery.html深度分析

 

 

 

转载请注明:文章转载自 www.mshxw.com
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号