`
学会做人
  • 浏览: 121165 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

js同步和异步的问题

阅读更多

 

1.ie动态加载js文件时,它默认就为同步,可以不用设置同步(也可直调用Skip.includeJsSrc())
2.ff动态加载js文件时,它默认为异步,要设置成同步,加载完直接调用才不会出错
3.无论ie还是ff在动态加载js内容时,没有请求服务器,不会存在异步问题
注:无论ie还是ff在页面加载js时(即执行整个页面),都是为同步的加载,除非设置script的属性defer="true"(此属性好像也只是对ie有效)

 

=======================================================================================

===

================================================================

 

动态加载js文件

一.直接加载

<body>

<div id="divId"></div>

<script>

     //1.动态创建js

     var rootObject=document.getElementById("divId");
     var oScript = document.createElement( "script" );
     oScript.type = "text/javascript";
     oScript.src = test.js; //test.js方法中有一个方法function test(){alert("test");}
     rootObject.appendChild(oScript);

 

     //2.调用js

     test();//在ie中不会出错,在firefox会出错,因为firefox默认为异步加载(在向服务器请求加载test.js文件的同时,继续向下执行了,调用test()方法,就自然找不到这个方法)

</script>

</body>

二.同步加载

<body>

<div id="divId"></div>

<script>

(function(){

 

Skip={

//获取XMLHttpRequest对象(提供客户端同http服务器通讯的协议)

getXmlHttpRequest:function ()
{
    if ( window.XMLHttpRequest ) // 除了IE外的其它浏览器
           return new XMLHttpRequest() ;
    else if ( window.ActiveXObject ) // IE
            return new ActiveXObject("MsXml2.XmlHttp") ;

},

 

 //导入内容
includeJsText :function (rootObject,jsText)
       {
        if ( rootObject != null ){
                var oScript = document.createElement( "script" );
             oScript.type = "text/javascript";
            //oScript.id = sId;
            //oScript.src = fileUrl;
            //oScript.defer = true;
            oScript.text = jsText;
            rootObject.appendChild(oScript);
            //alert(oScript.text);
        }
       },


 //导入文件
includeJsSrc :function (rootObject, fileUrl)
      {
        if ( rootObject != null ){
                var oScript = document.createElement( "script" );
             oScript.type = "text/javascript";
            oScript.src = fileUrl;
            rootObject.appendChild(oScript);
       }
      },

 

//同步加载
addJs:function(rootObject, url){

        var oXmlHttp = this.GetHttpRequest() ;
       
        oXmlHttp.onreadystatechange = function()  //其实当在第二次调用导入js时,因为在浏览器当中存在这个*.js文件了,它就不在访问服务器,也就不在执行这个方法了,这个方法也只有设置成异步时才用到
       
        {
            if ( oXmlHttp.readyState == 4 ) //当执行完成以后(返回了响应)所要执行的
       
            {
                if ( oXmlHttp.status == 200 || oXmlHttp.status == 304 ) //200有读取对应的url文件,404表示不存在这个文件
       
                {
       
                    includeJsSrc( rootObject, url);
                }
       
                else
       
                {
                    alert( 'XML request error: ' + oXmlHttp.statusText + ' (' + oXmlHttp.status + ')' ) ;
       
                }
       
            }

         }
        
         //1.True 表示脚本会在 send() 方法之后继续执行,而不等待来自服务器的响应,并且在open()方法当中有调用到onreadystatechange()这个方法。通过把该参数设置为 "false",可以省去额外的 onreadystatechange 代码,它表示服务器返回响应后才执行send()后面的方法.
         //2.同步执行oXmlHttp.send()方法后oXmlHttp.responseText有返回对应的内容,而异步还是为空,只有在oXmlHttp.readyState == 4时才有内容,反正同步的在oXmlHttp.send()后的操作就相当于oXmlHttp.readyState == 4下的操作,它相当于只有了这一种状态.
      oXmlHttp.open('GET', url, false); //url为js文件时,ie会自动生成 '<script src="*.js" type="text/javascript"></script>',ff不会 
      oXmlHttp.send(null);
      includeJsText(rootObject,oXmlHttp.responseText);
      }
}

};
 var rootObject=document.getElementById("divId");

 Skip.addJs(rootObject,"test.js")//test.js文件中含有funciotn test(){alert("test");}

test();//即使马上调用也不会出错了.


})();

 

</script>

</body>

 

分享到:
评论

相关推荐

    JS同步、异步、延迟加载的方法

    本文讲述了JS同步、异步、延迟加载的方法。分享给大家供大家参考,具体如下: 一:同步加载 我们平时使用的最多的一种方式。 [removed][removed] 同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止后续的解析...

    关于解决jquery同步异步的问题

    ### 关于解决jQuery同步异步的问题 在前端开发过程中,我们经常会使用到jQuery库来进行DOM操作及Ajax请求等。而在处理Ajax请求时,默认情况下jQuery的`$.ajax()`方法是采用异步的方式执行的,这对于大部分场景来说...

    js前端面试之同步与异步问题详解

    js同步和异步问题是什么–&gt;为什么会产生异步问题–&gt;如何解决。 一、JavaScript起源 技术的出现,和应用场景密切相关的。JavaScript诞生于1995年。当时,它的主要目的是处理以前由服务器端语言(如Perl)负责的一些...

    同步方法和异步方法比较

    在JavaScript中,异步常见于Node.js环境,通过回调函数、Promise或async/await来处理。而在C#中,`async`和`await`关键字提供了异步编程的支持。 综上所述,选择同步或异步方法需要权衡代码的可读性、可维护性和...

    Angular异步变同步处理方法

    Angular异步变同步处理方法是前端开发中用于解决多个接口请求顺序依赖问题的一种技术手段。由于异步操作的特性,它能处理那些按顺序依次执行的接口调用,而不会阻塞主线程,让页面陷入假死状态。在Angular中,主要...

    Nodejs让异步变成同步的方法

    co是一个流行的用于JavaScript的Promise和生成器(Generators)的控制流库,它可以使异步代码看起来像同步代码。co库之所以能够做到这一点,是因为它利用了生成器函数的暂停和恢复执行的能力,从而使得异步操作能够...

    同步执行和异步执行学习Demo

    在编程领域,同步执行与异步执行是两种不同的任务处理方式,它们关乎程序的执行效率和用户体验。同步执行和异步执行是理解并发编程和多线程编程的关键概念。 **同步执行** 是一种线性、顺序的执行模式。在同步执行...

    详解socket阻塞与非阻塞,同步与异步、I/O模型

    同步和异步只关注客户端的调用机制,而阻塞和非阻塞则关乎服务端的处理方式。同步与异步的区分并不依赖于阻塞或非阻塞,它们可以结合使用。例如,客户端可以发起异步请求,然后服务端处理请求时可能采用阻塞或非阻塞...

    程序同步与异步的区别

    ### 程序同步与异步的区别...通过以上解释和示例,我们可以清楚地看到同步与异步操作之间的主要区别及其在实际编程中的应用。理解这些基本概念有助于开发者根据具体需求选择合适的编程模式,提高程序的性能和用户体验。

    js中同步与异步处理的方法和区别总结.docx

    JavaScript 中同步与异步处理的方法和区别总结 JavaScript 中的同步和异步处理是两种不同的编程方式,它们可以影响程序的执行效率和编程难度。在本文中,我们将详细介绍 JavaScript 中同步和异步处理的方法和区别。...

    AJAX同步或异步流程图

    首先,我们来看同步和异步这两种通信方式的区别: 1. **同步通信**:在同步模式下,浏览器会阻塞其他所有脚本执行,直到当前的AJAX请求完成。这意味着用户无法进行任何其他操作,直到请求返回结果。这种方式虽然...

    Node.js连接OpenGauss异步转同步封装

    在Node.js中,异步编程是常态,但有时为了代码的简洁和易读性,开发者可能希望将异步操作转换为同步形式。这样做通常会借助于Promise或async/await语法。 在描述中提到,这个封装使得开发者可以在异步代码中直接...

    javascript发送ajax请求,获取返回值res,async 同步/异步

    javascript发送ajax请求,获取返回值res,async 同步/异步 var res = sendRequest({ url : "1.php", //necessary method : "post", params : { param1 : "123", param2 : "234" }, async : false });

    Ajax同步和异步问题浅析及解决方法

    根据本文档提供的信息,我们可以详细解析Ajax的同步和异步执行模式,并探讨在实际开发中遇到的同步异步问题及其解决方法。 首先,需要明确的是,Ajax的请求默认是异步的。这意味着,当使用Ajax向服务器发送请求时,...

    异步&同步加载树节点----zTree(一)

    本篇我们将深入探讨“异步&同步加载树节点”这一主题,以zTree为例,解析其实现机制和优势。 首先,我们要理解什么是同步和异步加载。同步加载是指浏览器在执行代码时,如果遇到一个耗时的操作(如加载大量数据),...

    【JavaScript源代码】代码解析React中setState同步和异步问题.docx

    然而,在原生JavaScript事件监听器(如`addEventListener`)中或者在`setTimeout`、`requestAnimationFrame`等异步环境中,`setState`通常会表现为同步行为。这是因为这些情况下React不会自动进行批处理。在这种场景...

    js高级01-同步异步问题.md

    js高级01-同步异步问题.md

    Ajax异步与同步方法封装的js文件

    2 同步:MyAjaxs &quot; 要调用的方法页面 方法&quot; 参数 function d {alert d[&quot;d&quot;] ;} ;"&gt;调用方法:1 将下载好的Ajax js文件引用到页面 代码如下:&lt;script src &quot; js MyAjax js&quot; type &...

    js中同步与异步处理的方法和区别总结

    在使用异步请求时,有时需要将异步请求的结果返回给另一个js函数,此种情况下会出现未等异步请求返回请求结果,该发送请求所在js函数已经执行完后续操作,即已经执行return ,这样会导致return的结果为空字符。...

    同步和异步的区别.doc

    同步和异步是计算机通信和编程中的两个基本概念,它们主要应用于数据传输和处理的方式上。理解这两者的区别对于优化程序性能和提升用户体验至关重要。 **同步通信**: 在同步通信中,发送方发送数据后会等待接收方...

Global site tag (gtag.js) - Google Analytics