• 所有问题

    • js异步问题怎么解决

    如题所述

    举报该问题
    推荐答案   2018-01-19
    异步加载又叫非阻塞加载，浏览器在下载执行js的同时，还会继续进行后续页面的处理。主要有三种方式。
    方法一：也叫Script DOM Element
    (function(){
    var scriptEle = document.createElement("script");
    scriptEle.type = "text/javasctipt";
    scriptEle.async = true;
    scriptEle.src = "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js";
    var x = document.getElementsByTagName("head")[0];
    x.insertBefore(scriptEle, x.firstChild);
    })();

    <async>属性是HTML5中新增的异步支持。此方法被称为Script DOM Element 方法。Google Analytics 和 Google+ Badge 都使用了这种异步加载代码
    (function(){;
    var ga = document.createElement('script');
    ga.type = 'text/javascript';
    ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(ga, s);
    })();

    但是这种加载方式执行完之前会阻止onload事件的触发，而现在很多页面的代码都在onload时还执行额外的渲染工作，所以还是会阻塞部分页面的初始化处理。
    方法二：onload时的异步加载
    (function(){
    if(window.attachEvent){
    window.attachEvent("load", asyncLoad);
    }else{
    window.addEventListener("load", asyncLoad);
    }
    var asyncLoad = function(){
    var ga = document.createElement('script');
    ga.type = 'text/javascript';
    ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(ga, s);
    }
    )();

    这种方法只是把插入script的方法放在一个函数里面，然后放在window的onload方法里面执行，这样就解决了阻塞onload事件触发的问题。
    注:DOMContentLoaded与load的区别。前者是在document已经解析完成，页面中的dom元素可用，但是页面中的图片，视频，音频等资源未加载完，作用同jQuery中的ready事件；后者的区别在于页面所有资源全部加载完毕。
    方法三：其他方法
    由于JavaScript的动态性，还有很多异步加载方法： XHR Injection、 XHR Eval、 Script In Iframe、 Script defer属性、 document.write(script tag)。
    XHR Injection(XHR 注入)：通过XMLHttpRequest来获取javascript，然后创建一个script元素插入到DOM结构中。ajax请求成功后设置script.text为请求成功后返回的responseText。
    //获取XMLHttpRequest对象，考虑兼容性。
    var getXmlHttp = function(){
    var obj;
    if (window.XMLHttpRequest)
    obj = new XMLHttpRequest();
    else
    obj = new ActiveXObject("Microsoft.XMLHTTP");
    return obj;
    };
    //采用Http请求get方式;open()方法的第三个参数表示采用异步(true)还是同步(false)处理
    var xmlHttp = getXmlHttp();
    xmlHttp.open("GET", "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js", true);
    xmlHttp.send();
    xmlHttp.onreadystatechange = function(){
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
    var script = document.createElement("script");
    script.text = xmlHttp.responseText;
    document.getElementsByTagName("head")[0].appendChild(script);
    }
    }

    XHR Eval：与XHR Injection对responseText的执行方式不同，直接把responseText放在eval()函数里面执行。
    //获取XMLHttpRequest对象，考虑兼容性。
    var getXmlHttp = function(){
    var obj;
    if (window.XMLHttpRequest)
    obj = new XMLHttpRequest();
    else
    obj = new ActiveXObject("Microsoft.XMLHTTP");
    return obj;
    };
    //采用Http请求get方式;open()方法的第三个参数表示采用异步(true)还是同步(false)处理
    var xmlHttp = getXmlHttp();
    xmlHttp.open("GET", "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js", true);
    xmlHttp.send();
    xmlHttp.onreadystatechange = function(){
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
    eval(xmlHttp.responseText);
    //alert($);//可以弹出$,表明JS已经加载进来。click事件放在其它出会出问题，应该是还没加载进来
    $("#btn1").click(function(){
    alert($(this).text());
    });
    }
    }

    Script In Irame：在父窗口插入一个iframe元素，然后再iframe中执行加载JS的操作。
    var insertJS = function(){alert(2)};
    var iframe = document.createElement("iframe");
    document.body.appendChild(iframe);
    var doc = iframe.contentWindow.document;//获取iframe中的window要用contentWindow属性。
    doc.open();
    doc.write("<script>var insertJS = function(){};<\/script><body onload='insertJS()'></body>");
    doc.close();

    GMail Mobile：业内JS内容被注释，所以不会执行，在需要的时候，获取script中的text内容去掉注释，调用eval()执行。
    <script type="text/javascript">
    /*
    var ...
    */
    </script>

    HTML5新属性：async和defer属性
    defer属性：IE4.0就出现。defer属声明脚本中将不会有document.write和dom修改。浏览器会并行下载其他有defer属性的script。而不会阻塞页面后续处理。注：所有的defer脚本必须保证按顺序执行的。
    <script type="text/javascript" defer></script>

    async属性：HTML5新属性。脚本将在下载后尽快执行，作用同defer，但是不能保证脚本按顺序执行。他们将在onload事件之前完成。
    <script type="text/javascript" defer></script>

    Firefox 3.6、Opera 10.5、IE 9和最新的Chrome和Safari都支持async属性。可以同时使用async和defer，这样IE 4之后的所有IE都支持异步加载。
    没有async属性，script将立即获取（下载）并执行，期间阻塞了浏览器的后续处理。如果有async属性，那么script将被异步下载并执行，同时浏览器继续后续的处理。
    总结： 对于支持HTML5的浏览器，实现JS的异步加载只需要在script元素中加上async属性，为了兼容老版本的IE还需加上defer属性；对于不支持HTML5的浏览器(IE可以用defer实现)，可以采用以上几种方法实现。原理基本上都是向DOM中写入script或者通过eval函数执行JS代码，你可以把它放在匿名函数中执行，也可以在onload中执行，也可以通过XHR注入实现，也可以创建一个iframe元素，然后在iframe中执行插入JS代码。
    温馨提示：答案为网友推荐，仅供参考
    其他回答
    第1个回答  2018-01-19

    async:true为异步，改成false就是同步了

    $.ajax({
        url:'/comm/test1.php',
        type:'POST', //GET
        async:true,    //或false,是否异步    data:{
            name:'yang',age:25
        },
        timeout:5000,    //超时时间
        dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text
        beforeSend:function(xhr){
            console.log(xhr)
            console.log('发送前')
        },
        success:function(data,textStatus,jqXHR){
            console.log(data)
            console.log(textStatus)
            console.log(jqXHR)
        },
        error:function(xhr,textStatus){
            console.log('错误')
            console.log(xhr)
            console.log(textStatus)
        },
        complete:function(){
            console.log('结束')
        }
    })

    相似回答
    JS异步加载的几种方式答：解决思路：为了解决JS延迟加载的问题，可以利用异步加载缓存起来，但不立即执行，需要的时候在执行。如何进行缓存呢？将JS内容作为Image或者Object对象加载缓存起来，所以不会立即执行，然后在第一次需要的时候在执行。1：模拟较长的下载时间：利用thread让其sleep一段时间在执行下载操作。2：模拟较长的JS代码...
    异步加载 Js 的方式有哪些?答：JavaScript 脚本的异步加载方式有以下几种： - 使用 script 标签的 src 属性，指定一个回调函数，当脚本加载完成后，由浏览器自动调用该回调函数。- 使用 addEventListener 方法监听 script 标签的 load 事件，当脚本加载完成后，执行相应的操作。- 使用 document.createElement() 方法创建 script 标签，设...
    eggjs后台异步返回响应体,前端报404怎么办?答：这个问题可能是由于前端没有正确处理异步请求导致的。你可以尝试在前端使用Promise或者async/await来处理异步请求，以确保在后台返回响应体之前，前端已经准备好了接收响应体。如果你使用的是Egg.js，你可以在一些异步操作之后返回ctx.body。
    大家正在搜
    js兼容问题怎么解决js缓存问题怎么解决怎么解决跨域问题js原型链解决了什么问题js如何解决跨域问题js跨域问题的三种解决方案js精度丢失问题解决解决跨域问题js兼容性问题有哪些
    相关问题
    javascript中异步操作的异常怎么处理
    js处理异步问题
    javascript中的异步请求遇到的问题。。。
    js单线程和js异步操作的几种方法
    如何实现JS异步加载
    js如何异步执行方法
    js/javascript 异步执行方法
    js的同步、异步是指什么？怎么回事？与线程有关吗？