创建存储数据的数组或者对象;

每次调用方法的时候,往里面添加资源对象,包括路径;

每次调用的时候遍历此路劲是否存在,如存在,就调用此资源对象的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中如何避免动态引入重复资源的更多相关文章

  1. js教程--从入门到精通 第一篇 js的前世今生以及js中基本数据类型和引入方式

    1.Javascript前世今生   1.1.什么是Javascript       Javascript运行于Javascript [解释器/引擎]中的解释性脚本语言      Javascript ...

  2. JS中如何防止表单重复提交问题

    在登录页面html中写如下代码 <script type="text/javascript"> var issubmit=false; function dosubmi ...

  3. js中几种动态创建元素并设置文本内容的比较,及性能测试。

    内容 1 appendChild (都兼容) 2.insertAdjacentHTML (都兼容) 3.innerHTML (都兼容) 4.createDocumentFragment (都兼容) 动 ...

  4. 如何在 JS 中嵌入大量 HTML 代码 --更新2017-10-10 16:37:09

    一.一般方式 方式1:\ 要写在标签后面,看例子 var longString = "\ ------------------------\ ------------------------ ...

  5. https 页面中引入 http 资源的解决方式

    相对协议 应用场景 浏览器默认是不允许在 https 里面引用 http 资源的,一般都会弹出提示框. 用户确认后才会继续加载,用户体验非常差. 而且如果在一个 https 页面里动态的引入 http ...

  6. https http 混合访问_https 页面中引入 http 资源的解决方式

    解决android 5.0 webview不能加载http与https混合内容的问题 在使用WebView加载https资源文件时,如果认证证书不被Android认可,那么会出现无法成功加载对应资源问 ...

  7. vue中动态引入图片为什么要是require, 你不知道的那些事

    相信用过vue的小伙伴,肯定被面试官问过这样一个问题:在vue中动态的引入图片为什么要使用require 有些小伙伴,可能会轻蔑一笑:呵,就这,因为动态添加src被当做静态资源处理了,没有进行编译,所 ...

  8. JS动态引入js,CSS——动态创建script/link/style标签

    一.动态创建link方式 我们可以使用link的方式.如下代码所示. 二.动态创建style方式 但是,这样的话,需要加载整个css文件,但是那样有可能浪费一个http请求并占用一个服务器请求数,并等 ...

  9. js动态引入的四种方式

    index.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:// ...

随机推荐

  1. Java网络编程:什么是Socket编程?

    所谓socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄.应用程序通常通过"套接字"向网络发出请求或者应答网络请求. 我们开发的网络应用 ...

  2. ubuntu oracle数据库18c安装

    一.官网下载linux两个zip包 二.byqKx8a2tWcgBHb

  3. 21.Semaphore信号量

    Semaphore是一种基于计数的信号量.它可以设定一个阈值,基于此,多个线程竞争获取许可信号,做自己的申请后归还,超过阈值后,线程申请许可信号将会被阻塞.Semaphore可以用来构建一些对象池,资 ...

  4. Qt Unknown module(s) in QT: webengine

    到今天位置好像Qt 出到了5.10还是5.9.x吧,本身是用MSVC 5.7.0本身就有支持 webengine这个模块 然后跟风升级了5.9.1,公司项目不用qt框架了用VC渣渣6.0.....然后 ...

  5. Spring解决循环依赖

    1.Spring解决循环依赖 什么是循环依赖:比如A引用B,B引用C,C引用A,它们最终形成一个依赖环. 循环依赖有两种 1.构造器循环依赖 构造器注入导致的循环依赖,Spring是无法解决的,只能抛 ...

  6. 同时安装CUDA8.0和CUDA9.0

    http://geyao1995.com/CUDA8_CUDA9/ tensorflow1.5版本竟然不支持CUDA8.0了 卸载是不可能卸载的 1.原料准备 CUDA9.0下载:https://de ...

  7. php number_format()函数 语法

    php number_format()函数 语法 number_format()函数怎么用? php number_format()函数表示通过千位分组来格式化数字,语法是number_format( ...

  8. bootstrap的模态框的使用

    bootstrap的模态框 如果只想单独使用模态框功能,可以单独引入modal.js,和bootstrap的css,在bootstrap的包中,可引入bootstrap.js. 用法 通过data属性 ...

  9. python 反转列表的3种方式

    转载自:https://blog.csdn.net/bookaswine/article/details/42468735 方式一:使用reversed()函数 a=[1,2,3,4,5,6,7,8, ...

  10. Windows-右键菜单添加选项

    新建 add.reg 输入选项名和选项对应程序路径 Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\*\shell\选项名] [HKEY ...