js异步加载监听

test.html代码

<script type="text/javascript">
        function loadScript(url, callback) {
            var script = document.createElement("script");
            script.type = "text/javascript";
            if (script.readyState) {
                script.onreadystatechange = function() {
                    if (script.readyState == "complete" || script.readyState == "loaded") {
                        //回调加载的js方法
                        callback();
                    }
                }
            } else {
                script.onload = function() {
                    //回调用加载的js方法
                    callback();
                }

            }
            script.src = url; //确保事件绑定完毕之后再去加载触发事件回调
            document.head.appendChild(script);
        }
        loadScript("test.js", function() {
            test();
        })
    </script>
test.js代码
function test() {
    console.log("a");
}

执行结果
![在这里插入图片描述](https://img-blog.csdnimg.cn/20191212172429867.png)



方式二：
   <script type="text/javascript">
        function loadScript(url, callback) {
            var script = document.createElement("script");
            script.type = "text/javascript";
            if (script.readyState) {
                script.onreadystatechange = function() {
                    if (script.readyState == "complete" || script.readyState == "loaded") {
                        //回调加载的js方法
                        eval(callback);
                    }
                }
            } else {
                script.onload = function() {
                    //回调用加载的js方法
                    eval(callback);
                }

            }
            script.src = url; //确保事件绑定完毕之后再去加载触发事件回调
            document.head.appendChild(script);
        }
        loadScript("test.js", "test()")
    </script>

方法三:

   <script type="text/javascript">
       var  obj={
                 test:function(){
                           console.log("a");
                 }
      }
        function loadScript(url, callback) {
            var script = document.createElement("script");
            script.type = "text/javascript";
            if (script.readyState) {
                script.onreadystatechange = function() {
                    if (script.readyState == "complete" || script.readyState == "loaded")           {
                        //回调加载的js方法
                        obj[callback]();
                    }
                }
            } else {
                script.onload = function() {
                    //回调用加载的js方法
                   obj[callback]();
                }

            }
            script.src = url; //确保事件绑定完毕之后再去加载触发事件回调
            document.head.appendChild(script);
        }
        loadScript("test.js", "test")
    </script>

 说明:loadScript("test.js", "test")方法调用原因: loadScript("test.js", test());直接传入test方法导致文件没有加载，去执行并且解析test方法会导致错误，传入函数引用时 function(){}就不回去解析内部代码,需要的时候才回去加载执行.最好方式为第三种