javascript带回调函数的异步脚本载入方法实例分析


Posted in Javascript onJuly 02, 2015

本文实例讲述了javascript带回调函数的异步脚本载入方法。分享给大家供大家参考。具体实现方法如下:

var Loader = function () { }
Loader.prototype = {
  require: function (scripts, callback) {
    this.loadCount   = 0;
    this.totalRequired = scripts.length;
    this.callback    = callback;
    for (var i = 0; i < scripts.length; i++) {
      this.writeScript(scripts[i]);
    }
  },
  loaded: function (evt) {
    this.loadCount++;
    if (this.loadCount == this.totalRequired && typeof this.callback == 'function') this.callback.call();
  },
  writeScript: function (src) {
    var self = this;
    var s = document.createElement('script');
    s.type = "text/javascript";
    s.async = true;
    s.src = src;
    s.addEventListener('load', function (e) { self.loaded(e); }, false);
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(s);
  }
}

用法演示

var l = new Loader();
l.require([
  "example-script-1.js",
  "example-script-2.js"],
  function() {
    // Callback
    console.log('All Scripts Loaded');
  });

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript编程起步(第七课)
Feb 27 Javascript
javascript下给元素添加事件的方法与代码
Aug 13 Javascript
JavaScript 定义function的三种方式小结
Oct 16 Javascript
详细讲解JS节点知识
Jan 31 Javascript
js拦截alert对话框另类应用
Jan 16 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
Oct 17 Javascript
深入理解关于javascript中apply()和call()方法的区别
Apr 12 Javascript
全面总结Javascript对数组对象的各种操作
Jan 22 Javascript
原生JS实现图片懒加载(lazyload)实例
Jun 13 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
Jul 03 Javascript
5分钟快速看懂ES6中的反射与代理
Dec 19 Javascript
javascript 闭包详解
Jul 02 #Javascript
JavaScript实现点击自动选择TextArea文本的方法
Jul 02 #Javascript
浅谈Javascript线程及定时机制
Jul 02 #Javascript
JavaScript获得url查询参数的方法
Jul 02 #Javascript
js跨域请求的5中解决方式
Jul 02 #Javascript
JS实现从连接中获取youtube的key实例
Jul 02 #Javascript
由ReactJS的Hello world说开来
Jul 02 #Javascript
You might like
《魔兽争霸3:重制版》更新 多项视觉效果调整
2020/05/04 魔兽争霸
NT IIS下用ODBC连接数据库
2006/10/09 PHP
xml在joomla表单中的应用详解分享
2012/07/19 PHP
php递归获取目录内文件(包含子目录)封装类分享
2013/12/25 PHP
ThinkPHP3.1.3版本新特性概述
2014/06/19 PHP
十幅图告诉你什么是PHP引用
2015/02/22 PHP
tp5框架使用composer实现日志记录功能示例
2019/01/10 PHP
javascript在一段文字中的光标处插入其他文字
2007/08/26 Javascript
一个XML格式数据转换为图表的例子
2010/02/09 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
2013/12/17 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
2014/01/28 Javascript
jquery分页插件jpaginate在IE中不兼容问题
2014/04/22 Javascript
js父页面中使用子页面的方法
2016/01/09 Javascript
Javascript之Math对象详解
2016/06/07 Javascript
bootstrap学习笔记之初识bootstrap
2016/06/21 Javascript
js原生之焦点图转换加定时器实例
2016/12/12 Javascript
详解angularjs结合pagination插件实现分页功能
2017/02/10 Javascript
浅谈jQuery中事情的动态绑定
2017/02/12 Javascript
nodejs中模块定义实例详解
2017/03/18 NodeJs
React.js中常用的ES6写法总结(推荐)
2017/05/09 Javascript
vuex中使用对象展开运算符的示例
2017/09/25 Javascript
详细分析jsonp的原理和实现方式
2017/11/20 Javascript
Express之托管静态文件的方法
2018/06/01 Javascript
JS实现炫酷雪花飘落效果
2020/08/19 Javascript
javascript实现倒计时提示框
2021/03/02 Javascript
Python中optparse模块使用浅析
2015/01/01 Python
Pandas 同元素多列去重的实例
2018/07/03 Python
朴素贝叶斯Python实例及解析
2018/11/19 Python
PyCharm设置每行最大长度限制的方法
2019/01/16 Python
在Python中利用pickle保存变量的实例
2019/12/30 Python
乌克兰在线商店的价格比较:Price.ua
2019/07/26 全球购物
当文件系统受到破坏时,如何检查和修复系统?
2012/03/09 面试题
毕业生自荐书
2013/12/18 职场文书
2014年四风问题自我剖析材料
2014/09/15 职场文书
2014年团工作总结
2014/11/27 职场文书
检察院起诉书
2015/05/20 职场文书