JavaScript 中闭包怎么在多图预加载器中维护已加载计数-js教程-PHP中文网

闭包用于多图预加载器中维护独立、私有的加载计数状态，确保异步任务间不干扰且错误也计入完成判定。

javascript 中闭包怎么在多图预加载器中维护已加载计数

在多图预加载器中，闭包常用来维护已加载图片的数量，避免使用全局变量，同时确保每个预加载任务的状态独立。核心思路是：利用函数作用域保存计数变量，通过回调函数更新并检查完成状态。

用闭包封装计数和总数量

把 loadedCount 和 total 封在外部函数里，返回的加载函数能持续访问并修改它们：

function createPreloader(imageUrls, onComplete) {
  const total = imageUrls.length;
  let loadedCount = 0;

  return function loadImage(src) {
    const img = new Image();
    img.onload = () => {
      loadedCount++;
      if (loadedCount === total) {
        onComplete();
      }
    };
    img.onerror = () => {
      loadedCount++; // 失败也算一次尝试，避免卡住
      if (loadedCount === total) {
        onComplete();
      }
    };
    img.src = src;
  };
}

// 使用
const preload = createPreloader(['a.jpg', 'b.jpg', 'c.jpg'], () => {
  console.log('全部图片加载完毕');
});
preload('a.jpg');
preload('b.jpg');
preload('c.jpg');

支持异步批量触发且不依赖调用顺序

上面的写法允许图片按任意顺序加载完成，闭包中的 loadedCount 是私有且稳定的。注意几点：

java-api-doc-generator

分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

下载

每个 img 实例绑定自己的 onload 和 onerror，互不影响
即使某张图加载极快（比如缓存命中），也不会覆盖其他回调逻辑
错误也计入计数，防止因个别失败导致 onComplete 永不触发

扩展：带进度回调的闭包版本

如果还需要实时通知当前加载进度，可以在闭包中加入 onProgress 并保持状态干净：

function createPreloader(imageUrls, onComplete, onProgress) {
  const total = imageUrls.length;
  let loadedCount = 0;

  return function loadImage(src) {
    const img = new Image();
    img.onload = img.onerror = () => {
      loadedCount++;
      if (onProgress) onProgress(loadedCount, total);
      if (loadedCount === total) onComplete();
    };
    img.src = src;
  };
}