js中如何避免动态引入重复资源
创建存储数据的数组或者对象;
每次调用方法的时候,往里面添加资源对象,包括路径;
每次调用的时候遍历此路劲是否存在,如存在,就调用此资源对象的promise进行操作。
可避免资源未加载完成就执行的情况。
var arr = [];
function getStyle(src){
let script = document.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.defer = true;
script.src = src;
arr.find(e => e.src === src) || document.head.appendChild(script);
arr.find(e => e.src === src) || arr.push({
src: src,
promise: new Promise((rev,rej) => {
script.onload = () => rev(222)
})
});
return arr.find(e => e.src === src).promise;
}
for(var i = 0;i < 20;i++){
getStyle('https://code.jquery.com/jquery-3.1.1.min.js').then((a)=>console.log(a));
}
js中如何避免动态引入重复资源的更多相关文章
- js教程--从入门到精通 第一篇 js的前世今生以及js中基本数据类型和引入方式
1.Javascript前世今生 1.1.什么是Javascript Javascript运行于Javascript [解释器/引擎]中的解释性脚本语言 Javascript ...
- JS中如何防止表单重复提交问题
在登录页面html中写如下代码 <script type="text/javascript"> var issubmit=false; function dosubmi ...
- js中几种动态创建元素并设置文本内容的比较,及性能测试。
内容 1 appendChild (都兼容) 2.insertAdjacentHTML (都兼容) 3.innerHTML (都兼容) 4.createDocumentFragment (都兼容) 动 ...
- 如何在 JS 中嵌入大量 HTML 代码 --更新2017-10-10 16:37:09
一.一般方式 方式1:\ 要写在标签后面,看例子 var longString = "\ ------------------------\ ------------------------ ...
- https 页面中引入 http 资源的解决方式
相对协议 应用场景 浏览器默认是不允许在 https 里面引用 http 资源的,一般都会弹出提示框. 用户确认后才会继续加载,用户体验非常差. 而且如果在一个 https 页面里动态的引入 http ...
- https http 混合访问_https 页面中引入 http 资源的解决方式
解决android 5.0 webview不能加载http与https混合内容的问题 在使用WebView加载https资源文件时,如果认证证书不被Android认可,那么会出现无法成功加载对应资源问 ...
- vue中动态引入图片为什么要是require, 你不知道的那些事
相信用过vue的小伙伴,肯定被面试官问过这样一个问题:在vue中动态的引入图片为什么要使用require 有些小伙伴,可能会轻蔑一笑:呵,就这,因为动态添加src被当做静态资源处理了,没有进行编译,所 ...
- JS动态引入js,CSS——动态创建script/link/style标签
一.动态创建link方式 我们可以使用link的方式.如下代码所示. 二.动态创建style方式 但是,这样的话,需要加载整个css文件,但是那样有可能浪费一个http请求并占用一个服务器请求数,并等 ...
- js动态引入的四种方式
index.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:// ...
随机推荐
- Codeforces 364E 分治
题意:给你一个01矩阵,问此矩阵有多少个和恰好为k的子矩形. 思路:分治,对于当前矩形,用一条中线把矩形分成两半,分治之后计算跨过中线的矩形个数.更具体的来说(假设划了一条水平中线),我们枚举矩形左右 ...
- bzoj 3251
http://www.lydsy.com/JudgeOnline/problem.php?id=3251 这道题在北京八十中的时候有人讲过.. 不过由于自己continue 写掉了一个所以调了很久. ...
- QTcpSocket发送结构体
我需要发送的结构体 struct NetDataHeader_t { int nDataType; int nDataSize; }; struct NetDataBase_t { NetDataHe ...
- OC学习篇之---对象的拷贝
在前一篇文章中我们说到了如何解决对象的循环引用问题:http://blog.csdn.net/jiangwei0910410003/article/details/41926369,这一篇文章我们就来 ...
- layer icon对应图标
layer icon对应图标 信息框(msg.alert.open.confirm) icon:0 icon:1 icon:2 icon:3 icon:4 icon:5 icon:6 icon:16 ...
- CCPC-Wannafly 秦皇岛 day5训练总结
训练总结 今天开局先上去看到了J,粗略(>_<)的看了下题意,然后就觉得应该是个dp 就开始写,思路是个三维dp,开的10000*10*10 觉得就不会爆,时间上也没问题,后面陆续wa了 ...
- GO 学习资源收集
golang图书,在线阅读Go轻松学https://www.golang123.com/book/16 Go示例学https://www.golang123.com/book/17 Go Web 编 ...
- LR快捷键
record optioning:录制选项——ctrl+f7 runtime setting : 运行时设置——F4 运行脚本——F5 参数列表:ctrl+L 注释:ctrl+shift+c 选中后 ...
- ZROI week5
考试 Part 简单题,从结尾倒着扫一遍就行. Pref 选一个最长的好的序列. 题目有点小简单,似乎直接哈希就行,然后还打了一遍\(kmp\). Chess 一道很不错的题目,用异或维护修改即可. ...
- dos添加文件夹属性!
attrib 显示所有文件的属性:参数:+r或-r [文件名] 设置文件属性是否为只读 +h或-h [文件名] 设置文件属性是否隐含 +s或-s [文件名] 设置文件属性是否为系统文件 +a或-a [ ...