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:// ...
随机推荐
- go语言从例子开始之Example9.切片
Slice 是 Go 中一个关键的数据类型,是一个比数组更加强大的序列接口 package main import "fmt" func main() { 不像数组,slice 的 ...
- OpenCV常用基本处理函数(5)图像模糊
2D卷积操作 cv.filter2D() 可以让我们对一幅图像进行卷积操作, 图像模糊(图像平滑)使用低通滤波器可以达到图像模糊的目的.这对与去除噪音很有帮助.其实就是去除图像中的高频成分(比如:噪音 ...
- filter 过滤emoji
拦截器 public class EmojiFilter implements Filter { private FilterConfig filterConfig; public void init ...
- linux make: *** No targets specified and no makefile found. Stop.
[root@localhost Python-]# ./configure checking build system type... x86_64-unknown-linux-gnu checkin ...
- php操作redis--生存时间篇
常用函数:expireAt,expire,ttl 应用场景:登陆生效时间,验证码有效时间等 设置某个键的有效时间,如当天有效(以时间戳的方式设置) $expireTime = mktime('23', ...
- Linux文本处理三剑客之——grep
一Linux文本处理三剑客之——grep Linux文本处理三剑客都支持正则表达式 grep :文本过滤( 模式:pattern) 工具,包括grep, egrep, fgrep (不支持正则表达式) ...
- Python--数据类型与变量(列表、元祖、字典)
今天我们来看Python中3种內建的数据结构:列表.元祖和字典 列表 定义:[]内以逗号分隔,按照索引,存放各种数据类型,每个位置代表一个元素特性:1.可存放多个值2.可修改指定索引位置对应的值,可变 ...
- hdu1059&poj1014 Dividing (dp,多重背包的二分优化)
Problem Description Marsha and Bill own a collection of marbles. They want to split the collection a ...
- BZOJ 3622: 已经没有什么好害怕的了(二项式反演)
传送门 解题思路 首先将\(a\),\(b\)排序,然后可以算出\(t(i)\),表示\(a(i)\)比多少个\(b(i)\)大,根据容斥套路,设\(f(k)\)表示恰好有\(k\)个\(a(i)\) ...
- Nginx + Tomcat 配置负载均衡集群简单实例
一.Hello world 1.前期环境准备 准备两个解压版tomcat,如何同时启动两个tomcat,请看我的另一篇文章<一台机器同时启动多个tomcat>. nginx官网下载解压版n ...