本文我们来来接怎样实现更容易扩展的JavaScript进度管理方式，下文有很详细的原理介绍及测试，对大家学习和工作都有一定的参考价值，感兴趣的朋友就继续往下看吧。

    我们写程序的时候会经常遇到显示进度的需求，如加载进度、上传进度等。最常见的实现方式是通过记录已完成数量(loadedCount)和总数量(totalCount)，然后算一下就能得到进度了。这种方式简单粗暴，容易实现，但不好扩展，必须有个地方维护所有loadedCount和totalCount。
本文将会基于上述实现方式，实现一种更容易扩展的进度管理方式。

问题

笔者在写 WebGL 应用，在应用预加载阶段需要计算加载进度。
加载的内容包括：模型资源、贴图资源、脚本资源等。
其中模型资源中又会包含材质资源，材质资源里面又会包含贴图资源。
画图来表示的话就是如下的结构：

+-------------------------------------------------------------+
|                                                             |
|  resources                                                  |
|                                                             |
|  +----------+   +-----------------+   +-----------------+   |
|  | script1  |   | model1          |   | model2          |   |
|  +----------+   |                 |   |                 |   |
|                 | -------------+  |   | -------------+  |   |
|  +----------+   | |model1.json |  |   | |model2.json |  |   |
|  | script2  |   | +------------+  |   | +------------+  |   |
|  +----------+   |                 |   |                 |   |
|                 | +------------+  |   | +------------+  |   |
|  +----------+   | | material1  |  |   | | material1  |  |   |
|  | texture1 |   | | +--------+ |  |   | | +--------+ |  |   |
|  +----------+   | | |texture1| |  |   | | |texture1| |  |   |
|                 | | +--------+ |  |   | | +--------+ |  |   |
|  +----------+   | | +--------+ |  |   | | +--------+ |  |   |
|  | texture2 |   | | |texture2| |  |   | | |texture2| |  |   |
|  +----------+   | | +--------+ |  |   | | +--------+ |  |   |
|                 | +------------+  |   | +------------+  |   |
|                 |                 |   |                 |   |
|                 | +------------+  |   | +------------+  |   |
|                 | | material2  |  |   | | material2  |  |   |
|                 | +------------+  |   | +------------+  |   |
|                 +-----------------+   +-----------------+   |
|                                                             |
+-------------------------------------------------------------+

这里有个前提：当加载某个资源的时候，必须保证这个资源及它引用的资源全部加载完成后，才能算加载完成。
基于这个前提，我们已经实现了一个onProgress接口，这个接口返回的进度是已经包含了子资源的加载进度的了。
翻译成代码就是：

class Asset {
    load(onProgress) {
        return new Promise((resolve) => {
            if (typeof onProgress !== 'function') {
                onProgress = (_p) => {  };
            }

            let loadedCount = 0;
            let totalCount = 10; // NOTE: just for demo
            let onLoaded = () => {
                loadedCount++;
                onProgress(loadedCount / totalCont);
                if (loadedCount === totalCount) resolve();
            };

            Promise.all(
                this.refAssets.map(asset => asset.load().then(onLoaded))
            );
        });
    }
}

既然有了这个接口，如果沿用全局维护loadedCount和totalCount的形式的话，处理起来其实挺麻烦的。
本文接下来要介绍的，就是一种变通的做法。

原理

基本思想就是分而治之。把一个大任务拆分成多个小任务，然后分别计算所有小任务的进度，最后再把所有小任务的进度归并起来得到总进度。
如下图表示：

+--------------------------------------------------------------------+
|                                                                    |
|                                                                    |
|   total progress                                                   |
|                                                                    |
|   +---------+---------+----------+----------+--------+--------+    |
|   | script1 | script2 | texture1 | texture2 | model1 | model2 |    |
|   |  (0~1)  |  (0~1)  |   (0~1)  |   (0~1)  |  (0~1) |  (0~1) |    |
|   +---------+---------+----------+----------+--------+--------+    |
|                                                                    |
|   model1                                                           |
|   +-------------+-----------------------+-----------+              |
|   | model1.json |      material1        | material2 |              |
|   |   (0~1)     |        (0~1)          |   (0~1)   |              |
|   +------------------------+------------------------+              |
|                 | texture1 |  texture2  |                          |
|                 |   (0~1)  |    (0~1)   |                          |
|                 +----------+------------+                          |
|                                                                    |
|   model2                                                           |
|   +-------------+-----------------------+-----------+              |
|   | model2.json |      material1        | material2 |              |
|   |    (0~1)    |        (0~1)          |   (0~1)   |              |
|   +------------------------+------------------------+              |
|                 | texture1 |  texture2  |                          |
|                 |   (0~1)  |    (0~1)   |                          |
|                 +----------+------------+                          |
|                                                                    |
+--------------------------------------------------------------------+

基于这个原理去实现进度，实现方式就是通过一个列表去保存所有资源当前的加载进度，然后每次触发onProgress的时候，执行一次归并操作，计算总进度。

var progresses = [
  0, // script1,
  0, // script2,
  0, // texture1,
  0, // texture2,
  0, // model1,
  0, // model2
];

function onProgress(p) {
    // TODO: progresses[??] = p;
    return progresses.reduce((a, b) => a + b, 0) / progresses.length;
}

但这里面有个难点，当触发onProgress回调的时候，如何知道应该更新列表中的哪一项呢？
利用JavaScript的闭包特性，我们可以很容易实现这一功能。

var progresses = [];
function add() {
    progresses.push(0);
    var index = progresses.length - 1;

    return function onProgress(p) {
        progresses[index] = p;
        reduce();
    };
}

function reduce() {
    return progresses.reduce((a, b) => a + b, 0) / progresses.length;
}

利用闭包保留资源的索引，当触发onProgress的时候，就能根据索引去更新列表中对应项的进度了。最后归并的时候就能计算出正确的进度了。
剩下的事情就是整合我们所有的代码，然后对其进行测试了

测试

我们可以用下面的代码来模拟一下整个加载过程：

class Asset {
    constructor(totalCount) {
        this.loadedCount = 0;
        this.totalCount = totalCount;
        this.timerId = -1;
    }

    load(onProgress) {
        if (typeof onProgress !== 'function') {
            onProgress = (_p) => {  };
        }

        return new Promise((resolve) => {
            this.timerId = setInterval(() => {
                this.loadedCount++;
                onProgress(this.loadedCount / this.totalCount);
                if (this.loadedCount === this.totalCount) {
                    clearInterval(this.timerId);
                    resolve();
                }
            }, 1000);
        });
    }
}

class Progress {
    constructor(onProgress) {
        this.onProgress = onProgress;
        this._list = [];
    }

    add() {
        this._list.push(0);

        const index = this._list.length - 1;

        return (p) => {
            this._list[index] = p;
            this.reduce();
        };
    }

    reduce() {
        const p = Math.min(1, this._list.reduce((a, b) => a + b, 0) / this._list.length);
        this.onProgress(p);
    }
}

const p = new Progress(console.log);
const asset1 = new Asset(1);
const asset2 = new Asset(2);
const asset3 = new Asset(3);
const asset4 = new Asset(4);
const asset5 = new Asset(5);

Promise.all([
    asset1.load(p.add()),
    asset2.load(p.add()),
    asset3.load(p.add()),
    asset4.load(p.add()),
    asset5.load(p.add()),
]).then(() => console.log('all resources loaded'));

/**
  输出
  Promise { <state>: "pending" }
  
  0.2 
  0.3 
  0.36666666666666664 
  0.41666666666666663 
  0.45666666666666667 
  0.5566666666666668 
  0.6233333333333333 
  0.6733333333333333 
  0.7133333333333333 
  0.78 
  0.8300000000000001 
  0.8699999999999999 
  0.9199999999999999 
  0.96 
  1 
  all resources loaded 
 */

这种方式的优点是能避开全局管理loadedCount和totalCount，把这部分工作交回资源内部管理，它要做的只是对大任务进行归并计算。

缺点也很明显，需要对onProgress接口进行一次统一。在已有项目中推进难度很大，所以比较适合新项目或者小项目去实践。

    以上就是关于JavaScript进度管理方式的介绍了，上述方式仅供参考，希望大家能有帮助，想要了解更多JavaScript进度管理的内容，可以继续浏览群英网络其他相关的文章。

文本转载自脚本之家

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• Bootstrap网格系统如何工作，单元格宽度怎样设置

  栅格就是网格，本文详细的介绍了Bootstrap网页布局网格的原理和实现，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• React中onClick传递参数是怎样，onclick未执行如何解决

  很多朋友向小编反映一个问题关于React onClick 传递参数的问题，当点击删除按钮需要执行删除操作，针对这个问题该如何处理呢？下面小编给大家带来了React onClick 传递参数的问题，感兴趣的朋友一起看看吧

• 基于JS如何制作上下滑动的轮播效果，代码是什么

  这篇文章主要为大家详细介绍了js实现上下滑动轮播，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• vue3中全局和局部自定义指令怎样实现

  这篇文章主要介绍了 vue3 自定义指令详情，自定义指令分为全局和局部两种类型，大家并不陌生。今天我们就讲讲在 vue3 中，自定义指令定义、使用以及钩子函数都有哪些变化？,需要的朋友可以参考一下

• vue首次渲染做了些什么，过程是怎样

  了解vue首次渲染全过程，我们应该从哪说起呢，很明显，是不是应该从入口文件说起啊，即main.js。今天我们一起来详细的看看vue的首次渲染过程