phpstudy集成环境

 首页 > 关于jquery 延迟，异步加载js 再执行并初始化

关于jquery 延迟，异步加载js 再执行并初始化

问题是关于异步加载js

//a.js
(function(){
    function loadInit(){
        var $Deferred_01 = function(){
            return $.getScript('aa.js') 
        }
        var $Deferred_02 = function(){
            return $.getScript('bb.js') //依赖aa.js
        }
        var $promise = $.when($Deferred_01()).then($Deferred_02());
        return $promise;
    }
    var windLoadFn = window.onload;
    if(windLoadFn !=null){
        window.onload = function(){        
            windLoadFn();        
            return loadInit();        
        }    
    }else{
        window.onload = function(){    
            return loadInit();
        }
    }    

})()        
//b.js
(function(){
    function loadInit(){
            var bb = new BB() //依赖 bb.js;
    }
    if(window.onload!=null){
        var fn = window.onload;
        window.onload = function(){                
            fn().done(loadInit);
        };
    }else{
        window.onload = function(){
            loadInit();
        };
    }            
})()
//页面加载是
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="aa.js"></script>
<script type="text/javascript" src="bb.js"></script>
我遇到的问题是在bb.js执行总有找不到aa.js 的 对象 或者 bb的 对象  不能 new AA() 或 new BB()初始化

脚本添加应该是这样的吧

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="a.js"></script>
<script type="text/javascript" src="b.js"></script>

onload函数将在页面资源都被加载完成后执行（包括图片，html，css，JS脚本）
那么当a.js被加载执行的时候，此时onload还不会有值，那么下面的代码块将被执行

window.onload = function(){    //INIT_LOAD_JS
    return loadInit();
}

此时window.onload将绑定匿名函数，我们假设其函数名为 INIT_LOAD_JS
b.js在a.js后面加载
此时onload已经有绑定的函数对象，那么下面的代码块加被执行

var fn = window.onload;
window.onload = function(){ //INIT_LOAD_JS_RUN               
   fn().done(loadInit);
};

当load事件发生时，INIT_LOAD_JS_RUN函数将被执行，分别去加载aa.js和bb.js并被执行
那么正常的流程走下来;
在b.js中执行loadInit函数应该没有问题的

那么问题就在于

    var $promise = $.when($Deferred_01()).then($Deferred_02());

要这样写

var $promise = $.when($Deferred_01()).then(function(){
    return $Deferred_02();
});

一个完整的例子
a.js

(function(){
    function loadInit(){
        var $Deferred_01 = function(){
            return $.getScript('aa.js')
        }
        var $Deferred_02 = function(){
            return $.getScript('bb.js') //依赖aa.js
        }
        //要这样写
        var $promise = $.when($Deferred_01()).then(function(){
            return $Deferred_02();
        });
        return $promise;
    }
    var windLoadFn = window.onload;
    if(windLoadFn !=null){
        window.onload = function(){
            windLoadFn();
            return loadInit();
        }
    }else{
        window.onload = function(){
            return loadInit();
        }
    }

})()

b.js

/**
 * Created by akong on 16/2/26.
 */
(function(){
    function loadInit(){
        var bb = new BB() //依赖 bb.js;
    }
    if(window.onload!=null){
        var fn = window.onload;
        window.onload = function(){
            fn().done(loadInit);
        };
    }else{
        window.onload = function(){
            loadInit();
        };
    }
})()

aa.js

function AA(){
    console.log('~~~AAA~~~');
}

bb.js

function BB(){
    var aa=new AA();
    console.log('~~~BB~~~');
}

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="script/jquery_2_1_3/jquery-2.1.3.min.js"></script>
    <script type="text/javascript" src="a.js"></script>
    <script type="text/javascript" src="b.js"></script>
</head>
<body>
</body>
</html>

运行后控制台将输出
~~~AAA~~~
~~~BB~~~

【热门文章】
【热门文章】