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

 更新时间:2015年07月02日 12:12:27   作者:不吃皮蛋  
这篇文章主要介绍了javascript带回调函数的异步脚本载入方法,以实例形式较为详细的分析了javascript回调函数实现异步载入的定义与使用技巧,需要的朋友可以参考下

本文实例讲述了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新功能介绍之findLast()和findLastIndex()

    JavaScript新功能介绍之findLast()和findLastIndex()

    最近工作中遇到了一个关于查找数组里面的目标元素的方法,所以下面这篇文章主要给大家介绍了关于JavaScript新功能之findLast() 和findLastIndex()的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-04-04
  • 通过实例解析JavaScript for in及for of区别

    通过实例解析JavaScript for in及for of区别

    这篇文章主要介绍了通过实例解析JavaScript for in及for of区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-06-06
  • JavaScript数组常用方法

    JavaScript数组常用方法

    这篇文章主要介绍了JavaScript数组常用方法的相关资料,非常的详细,需要的朋友可以参考下
    2015-03-03
  • Bootstrap使用基础教程详解

    Bootstrap使用基础教程详解

    Bootstrap ——来自Twitter的流行前端框架。接下来通过本文给大家介绍bootstrap入门基础脚本,包括bootstrap特征及使用方面的知识点,感兴趣的朋友一起看看吧
    2016-09-09
  • 基于JS实现checkbox全选功能实例代码

    基于JS实现checkbox全选功能实例代码

    最近做了个项目其中有这样的需求要求实现点击全选选中所有菜单,再次点击全选取消选中。下面小编给大家分享实现代码,对js实现checkbox全选功能感兴趣的朋友参考下吧
    2016-10-10
  • 使用requirejs模块化开发多页面一个入口js的使用方式

    使用requirejs模块化开发多页面一个入口js的使用方式

    这篇文章主要介绍了使用requirejs模块化开发多页面一个入口js的使用方式,需要的朋友可以参考下
    2017-06-06
  • nestjs返回给前端数据格式的封装实现

    nestjs返回给前端数据格式的封装实现

    这篇文章主要介绍了nestjs返回给前端数据格式的封装实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-02-02
  • JS中some和every的区别和用法详解

    JS中some和every的区别和用法详解

    every 和 some 都是数组迭代方法,都可以遍历数组,这篇文章主要介绍了JS中some和every的区别和用法,需要的朋友可以参考下
    2023-05-05
  • xmlhttp缓存清除的2种解决方法

    xmlhttp缓存清除的2种解决方法

    这篇文章主要介绍了xmlhttp缓存清除的2种解决方法。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • 微信小程序实现左侧导航栏

    微信小程序实现左侧导航栏

    这篇文章主要为大家详细介绍了微信小程序实现左侧导航栏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07

最新评论