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

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

每次调用的时候遍历此路劲是否存在,如存在,就调用此资源对象的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. SQLRecoverableException: I/O Exception: Connection reset

    https://stackoverflow.com/questions/6110395/sqlrecoverableexception-i-o-exception-connection-reset T ...

  2. js 在array的遍历操作中修改arry中元素数量 出现的一些奇特的操作

    在js中array是属于复杂类型,在arr1=arr2得赋值操作中,arr1得到的值并不是arr2的value,而是一个指向引用.那么修改arr1的同时arr2读取的值也会同步变化,那么问题来了,上代 ...

  3. 【leetcode】640. Solve the Equation

    题目如下: 解题思路:本题的思路就是解析字符串,然后是小学时候学的解方程的思想,以"2x+3x-6x+1=x+2",先把左右两边的x项和非x项进行合并,得到"-x+1=x ...

  4. cocos2D-X 显示中文

    { 将所在的cpp文件改为utf-8 无签名格式再编译 //但,治标不治本 }

  5. django中初学常犯错误之梳理

    一,关于setting设置,1,两个INSRALLEN_APPS,需要将新建的app添加进去 2,需要再setting将html的路径拼接起来 二,urls.py 设置,from app名 impor ...

  6. VS2014:"64位调试操作花费的时间比预期要长",无法运行调试解决办法

    解决步骤: 右键管理员运行命令提示符,输入IISRESERT,重启IIS即可

  7. VMware 虚拟机NAT模式如何设置网络连接,从头到尾全过程~!!

    一.首先查看自己的虚拟机服务有没有开启,选择电脑里面的服务查看: 1.计算机点击右键选择管理  2.进入管理选择VM开头的服务如果没有开启的话就右键开启  二.虚拟机服务开启后就查看本地网络虚拟机的网 ...

  8. 二.通过jenkins对系统的监控(1)

    说明:通过jenkins定时请求系统,判断系统是否挂了. 注:windows环境 1.新建一个自由风格的项目. 2.构建触发器选择定时构建. 3.执行windows批处理命令 4.构建后操作,发邮件 ...

  9. (5)C++ 循环和判断

    循环 一.for循环 ; i < ; i++) { cout << "abc"<< endl; } 或 ; i; i--) { cout <&l ...

  10. (转)spring ioc原理(看完后大家可以自己写一个spring)

    原文地址:https://blog.csdn.net/it_man/article/details/4402245 最近,买了本Spring入门书:spring In Action .大致浏览了下感觉 ...