使用Jquery promise 动态引入js文件

时间:2023-03-09 00:12:32
使用Jquery promise 动态引入js文件

动态加载一个js得方式很多,如下方式:

/**
*一般方式加载
*/
function normalLoadScript(url) {
var node = document.createElement('script');
node.type = "text/javascript";
node.src = url;
document.getElementsByTagName('head')[0].appendChild(node);
}

cnblog_mc

那么如果需要在这个js加载完成之后执行一些逻辑,该怎么做呢?可以使用jquery 提供的promise对象进行改造此方法

function promiseLoadScript (url) {
var dtd = $.Deferred();
var node = document.createElement('script');
node.type = "text/javascript";
node.src = url;
var onload = function () {
dtd.resolve();
};
$(node).load(onload).on('readystatechange', function () {
if (node.readyState == 'loaded') {
onload();
}
});
document.getElementsByTagName('head')[0].appendChild(node); return dtd.promise();
}

使用方法如下:

 $.when(this.promiseLoadScript("js/validateRules.js?v=" + Math.random())).then(function () {
//your code
});

这样就可以保证指定的js加载完毕之后再执行你的代码