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

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

每次调用的时候遍历此路劲是否存在,如存在,就调用此资源对象的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. go语言从例子开始之Example9.切片

    Slice 是 Go 中一个关键的数据类型,是一个比数组更加强大的序列接口 package main import "fmt" func main() { 不像数组,slice 的 ...

  2. OpenCV常用基本处理函数(5)图像模糊

    2D卷积操作 cv.filter2D() 可以让我们对一幅图像进行卷积操作, 图像模糊(图像平滑)使用低通滤波器可以达到图像模糊的目的.这对与去除噪音很有帮助.其实就是去除图像中的高频成分(比如:噪音 ...

  3. filter 过滤emoji

    拦截器 public class EmojiFilter implements Filter { private FilterConfig filterConfig; public void init ...

  4. linux make: *** No targets specified and no makefile found. Stop.

    [root@localhost Python-]# ./configure checking build system type... x86_64-unknown-linux-gnu checkin ...

  5. php操作redis--生存时间篇

    常用函数:expireAt,expire,ttl 应用场景:登陆生效时间,验证码有效时间等 设置某个键的有效时间,如当天有效(以时间戳的方式设置) $expireTime = mktime('23', ...

  6. Linux文本处理三剑客之——grep

    一Linux文本处理三剑客之——grep Linux文本处理三剑客都支持正则表达式 grep :文本过滤( 模式:pattern) 工具,包括grep, egrep, fgrep (不支持正则表达式) ...

  7. Python--数据类型与变量(列表、元祖、字典)

    今天我们来看Python中3种內建的数据结构:列表.元祖和字典 列表 定义:[]内以逗号分隔,按照索引,存放各种数据类型,每个位置代表一个元素特性:1.可存放多个值2.可修改指定索引位置对应的值,可变 ...

  8. hdu1059&poj1014 Dividing (dp,多重背包的二分优化)

    Problem Description Marsha and Bill own a collection of marbles. They want to split the collection a ...

  9. BZOJ 3622: 已经没有什么好害怕的了(二项式反演)

    传送门 解题思路 首先将\(a\),\(b\)排序,然后可以算出\(t(i)\),表示\(a(i)\)比多少个\(b(i)\)大,根据容斥套路,设\(f(k)\)表示恰好有\(k\)个\(a(i)\) ...

  10. Nginx + Tomcat 配置负载均衡集群简单实例

    一.Hello world 1.前期环境准备 准备两个解压版tomcat,如何同时启动两个tomcat,请看我的另一篇文章<一台机器同时启动多个tomcat>. nginx官网下载解压版n ...