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:// ...
随机推荐
- cglib代理与jdk动态代理示例
先看基于jdk实现的动态代理实现例子 1.先声明一个接口类 public interface UserService{ public String getName(String msg); } 2.实 ...
- 22.ReadWriteLock读写锁
import java.util.Random; import java.util.concurrent.locks.Lock; import java.util.concurrent.locks.R ...
- 【集群】Redis集群设计原理
Redis集群设计包括2部分:哈希Slot和节点主从 节点主从: 主从设计不算什么新鲜玩意,在数据库中我们也经常用主从来做读写分离,直接上图: 图上能看得到的信息: 1, 只有1个Master,可以有 ...
- 【LeetCode 34】在排序数组中查找元素的第一个和最后一个位置
题目链接 [题解] 二分某个数的上下界. 其实这个方法并不难. 只要你想清楚了二分最后一次执行的位置在什么地方就不难了. [代码] class Solution { public: vector< ...
- OC学习篇之---数组对象的引用计数问题和自动释放池的概念
之前一片文章中我们介绍了OC中的两个关键字@property和@synthesize的使用的使用: http://blog.csdn.net/jiangwei0910410003/article/de ...
- 微信jssdk安卓机分享QQ好友和QQ空间出现{"errMsg":"shareQQ:fail"}
使用ajax请求appid之类的配置,然后进行wx.config和wx.ready,苹果机上是完全OK的,但是安卓机上十次有九次是失败,只有一次能成功,百度了一下,有人说是参数有空格,有人说是微信bu ...
- flutter 接入阿里云OSS
之前因为使用正常文件上传,用户多时拥堵无法正常上传,因此接入阿里OSS 来解决这个问题.本来打算整原生那块,看了下比较麻烦,用flutter dio 直接请求oss 完成 1.上传用到了image_p ...
- 如何编写高性能的 javascript
一.Javascript代码执行效率1. DOM1.1 使用 DocumentFragment 优化多次 append说明:添加多个 dom 元素时,先将元素 append 到 DocumentFra ...
- python笔试做错的题目
a = [1,2,3] b = a print(id(a),id(b),a == b) print(a,b) b = b + [1,2,3] print(a,b) print(id(a),id(b), ...
- 如何将Vue项目部署到Nginx 服务器中
https://blog.csdn.net/qq_35366269/article/details/91385689