1. 云栖社区>
  2. >
  3. 正文

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

作者:用户 来源:互联网 时间:2016-07-02 13:24:45

javascript回调函数异步载入

javascript带回调函数的异步脚本载入方法实例分析_javascript技巧 - 摘要: 本文讲的是javascript带回调函数的异步脚本载入方法实例分析_javascript技巧, 本文实例讲述了javascript带回调函数的异步脚本载入方法。分享给大家供大家参考。具体实现方法如下: var Loader = function () { } Loader.prototype = { require: fun

本文实例讲述了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 异步回调、c 异步回调、微信支付异步通知回调、异步回调、java 异步回调,以便于您获取更多的相关知识。

弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率

40+云计算产品,6个月免费体验

现在注册,免费体验40+云产品,及域名优惠!

云服务器9.9元/月,大学必备