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

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

每次调用的时候遍历此路劲是否存在,如存在,就调用此资源对象的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. Codeforces 358D DP

    题意:有n只兔子需要喂养,每只兔子被喂养后的幸福感取决于与它相邻的兔子中已经被喂养的数量.现在问喂养这n只兔子可以获得的总幸福感最多是多少? 思路:初步分析题目发现,一只兔子被喂养获得的幸福感取决于其 ...

  2. 有趣的taskset命令,使进程再指定CPU上运行

    前言 taskset命令,用于进程的CPU调优,可以把某进程,指定再某CPU内工作. 如还不明白,可以参考此文 http://www.361way.com/linux-context-switch/5 ...

  3. 运用pool进程池启动大量子进程

    # Pool进程池类 from multiprocessing import Pool import os import time import random def run(index): prin ...

  4. redis笔记3-命令

    通用命令:keys * --查询所有keykeys list* --查询list开头的keytype key1 --查询键对应的value类型del key --删除指定的keyttl key --查 ...

  5. Python星号表达式提取数据

    def drop_first_last(grades): first,*middle,last=grades return middle 这段代码的作用是grades中的元素,第一个和最后一个分别被提 ...

  6. TCP练习

    然后基本的socket编程,用TCP做两个进程互相发消息.C端主动发hello,S端收到后回world. #include <stdio.h> #include <stdlib.h& ...

  7. 【LeetCode 36】有效的数独

    题目链接 [题解] 就一傻逼模拟题 [代码] class Solution { public: bool isValidSudoku(vector<vector<char>>& ...

  8. 设置当内容超出div(文字长度超出div宽度)出现滚动条

    overflow 一共有5个属性. 1.overflow:auto:内容会被修剪,超出设置的宽高后会出现滚动条 2.overflow:scroll;内容会被修剪,不管内容是否超出,都会出现滚动条的位置 ...

  9. windows 配置msys2环境

    msys2是一个在windows下模拟类unix的环境,之所以叫环境,是用为他提供了部分unix shell类似的功能,这个环境使你像在unix上使用shell一样.看到msys2你可能想到是不是还有 ...

  10. Openstack组件实现原理 — Keystone认证功能

    目录 目录 前言 Keystone安装列表 Keystone架构 Keystone的管理对象 一个理解Keystone管理对象功能的例子 Keystone管理对象之间的关系 Keystone V3的新 ...