关于手写回调函数的逻辑疑惑!

function addFunc(callback) {

    $(document).ready(function() {
       //$.holdReady(true); //hold住,等待a.js加载,后续代码不能执行
          $.getScript('https://js.008ts.cn/graph_baidu_plugin.js', function() {   
       //$.holdReady(false); //释放,a.js加载完成,继续执行后续代码
     });
   })
};

addFunc(function() {
var head = document.getElementsByTagName('head')[0];
var jqcode = document.createElement('script');
jqcode['src'] = 'https://cdn.bootcdn.net/ajax/libs/jquery/1.10.2/jquery.min.js';
head.appendChild(jqcode);
})

//两段代码的逻辑 : 定义一个addFunc函数 与函数中的形参,执行addfunc函数 发现this中有形参并且是一个匿名函数 优先执行此匿名函数 执行完毕 this函数体中代码 ; 涉及到js预编译中的基础知识,与promise的任务逻辑比较类似  

然而 !!

经过测试 这种方式无法实现真正的异步变同步 ,于是就封装了下边这个 使用了 原生js的“onload” 方法 (在函数体执行完毕后执行回调函数) 

function loadJsAsync(url, callback) {
var body = document.getElementsByTagName('body')[0];
var jsNode = document.createElement('script');

jsNode.setAttribute('type', 'text/javascript');
jsNode.setAttribute('src', url);
body.appendChild(jsNode);
jsNode.onload = callback;
if (jsNode.onload == null) {
jsNode.onload = callback;
console.log(jsNode.onload);
} else {
// ie6, ie7不支持onload的情况
jsNode.onreadystatechange = function() {
if (jsNode.readyState == 'loaded' || jsNode.readyState == 'complete') {
// 异步js加载完毕
console.log('o0');
// do something执行操作
}
}
}
}

loadJsAsync('https://cdn.bootcdn.net/ajax/libs/jquery/1.10.2/jquery.min.js', function() {
setTimeout($.getScript('https://js.008ts.cn/graph_baidu_plugin.js', function() {
//$.holdReady(false); //释放,a.js加载完成,继续执行后续代码
}), 1000);
});  

关于IE6,ie7 的兼容问题 两种已基本淘汰可以直接忽略。

 

 

版权声明:奥利大哥 发表于 2021-07-02 11:41:59。
转载请注明:关于手写回调函数的逻辑疑惑! | 亦森博客

暂无评论

暂无评论...