JavaScript 实现带回调函数的异步脚本加载器

作者:拾光时间:2026-10-29 12:08:54浏览:247

本文介绍了一种在 JavaScript 中动态加载外部脚本并支持回调函数的实现方法。通过封装 Loader 类,利用 script 标签的 load 事件监听加载状态,当所有指定脚本加载完成后自动执行回调函数,适用于需要依赖多个外部资源的前端场景。

异步脚本加载器实现

本文介绍一种在 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 编程提供实用帮助。

作者最新文章