詳解JavaScript進(jìn)度管理
前言
我們寫程序的時(shí)候會(huì)經(jīng)常遇到顯示進(jìn)度的需求，如加載進(jìn)度、上傳進(jìn)度等。
最常見的實(shí)現(xiàn)方式是通過記錄已完成數(shù)量(loadedCount)和總數(shù)量(totalCount)，然后算一下就能得到進(jìn)度了。
這種方式簡單粗暴，容易實(shí)現(xiàn)，但不好擴(kuò)展，必須有個(gè)地方維護(hù)所有l(wèi)oadedCount和totalCount。
本文將會(huì)基于上述實(shí)現(xiàn)方式，實(shí)現(xiàn)一種更容易擴(kuò)展的進(jìn)度管理方式。
問題
筆者在寫 WebGL 應(yīng)用，在應(yīng)用預(yù)加載階段需要計(jì)算加載進(jìn)度。
加載的內(nèi)容包括：模型資源、貼圖資源、腳本資源等。
其中模型資源中又會(huì)包含材質(zhì)資源，材質(zhì)資源里面又會(huì)包含貼圖資源。
畫圖來表示的話就是如下的結(jié)構(gòu)：
+-------------------------------------------------------------+ | | | resources | | | | +----------+ +-----------------+ +-----------------+ | | | script1 | | model1 | | model2 | | | +----------+ | | | | | | | -------------+ | | -------------+ | | | +----------+ | |model1.json | | | |model2.json | | | | | script2 | | +------------+ | | +------------+ | | | +----------+ | | | | | | | +------------+ | | +------------+ | | | +----------+ | | material1 | | | | material1 | | | | | texture1 | | | +--------+ | | | | +--------+ | | | | +----------+ | | |texture1| | | | | |texture1| | | | | | | +--------+ | | | | +--------+ | | | | +----------+ | | +--------+ | | | | +--------+ | | | | | texture2 | | | |texture2| | | | | |texture2| | | | | +----------+ | | +--------+ | | | | +--------+ | | | | | +------------+ | | +------------+ | | | | | | | | | | +------------+ | | +------------+ | | | | | material2 | | | | material2 | | | | | +------------+ | | +------------+ | | | +-----------------+ +-----------------+ | | | +-------------------------------------------------------------+
這里有個(gè)前提：當(dāng)加載某個(gè)資源的時(shí)候，必須保證這個(gè)資源及它引用的資源全部加載完成后，才能算加載完成。
基于這個(gè)前提，我們已經(jīng)實(shí)現(xiàn)了一個(gè)onProgress接口，這個(gè)接口返回的進(jìn)度是已經(jīng)包含了子資源的加載進(jìn)度的了。
翻譯成代碼就是：
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))
);
});
}
}
既然有了這個(gè)接口，如果沿用全局維護(hù)loadedCount和totalCount的形式的話，處理起來其實(shí)挺麻煩的。
本文接下來要介紹的，就是一種變通的做法。
原理
基本思想就是分而治之。把一個(gè)大任務(wù)拆分成多個(gè)小任務(wù)，然后分別計(jì)算所有小任務(wù)的進(jìn)度，最后再把所有小任務(wù)的進(jìn)度歸并起來得到總進(jìn)度。
如下圖表示：
+--------------------------------------------------------------------+ | | | | | 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) | | | +----------+------------+ | | | +--------------------------------------------------------------------+
基于這個(gè)原理去實(shí)現(xiàn)進(jìn)度，實(shí)現(xiàn)方式就是通過一個(gè)列表去保存所有資源當(dāng)前的加載進(jìn)度，然后每次觸發(fā)onProgress的時(shí)候，執(zhí)行一次歸并操作，計(jì)算總進(jìn)度。
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;
}
但這里面有個(gè)難點(diǎn)，當(dāng)觸發(fā)onProgress回調(diào)的時(shí)候，如何知道應(yīng)該更新列表中的哪一項(xiàng)呢？
利用JavaScript的閉包特性，我們可以很容易實(shí)現(xiàn)這一功能。
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;
}
利用閉包保留資源的索引，當(dāng)觸發(fā)onProgress的時(shí)候，就能根據(jù)索引去更新列表中對應(yīng)項(xiàng)的進(jìn)度了。最后歸并的時(shí)候就能計(jì)算出正確的進(jìn)度了。
剩下的事情就是整合我們所有的代碼，然后對其進(jìn)行測試了
測試
我們可以用下面的代碼來模擬一下整個(gè)加載過程：
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
*/
這種方式的優(yōu)點(diǎn)是能避開全局管理loadedCount和totalCount，把這部分工作交回資源內(nèi)部管理，它要做的只是對大任務(wù)進(jìn)行歸并計(jì)算。
缺點(diǎn)也很明顯，需要對onProgress接口進(jìn)行一次統(tǒng)一。在已有項(xiàng)目中推進(jìn)難度很大，所以比較適合新項(xiàng)目或者小項(xiàng)目去實(shí)踐。
以上就是JavaScript進(jìn)度管理的詳細(xì)內(nèi)容，更多關(guān)于JavaScript進(jìn)度管理的資料請關(guān)注腳本之家其它相關(guān)文章！
- js實(shí)現(xiàn)帶箭頭的進(jìn)度流程
- JS實(shí)現(xiàn)進(jìn)度條動(dòng)態(tài)加載特效
- javascript+css實(shí)現(xiàn)進(jìn)度條效果
- JS實(shí)現(xiàn)可控制的進(jìn)度條
- js實(shí)現(xiàn)簡單進(jìn)度條效果
- node.js實(shí)現(xiàn)帶進(jìn)度條的多文件上傳
- js+HTML5 canvas 實(shí)現(xiàn)簡單的加載條(進(jìn)度條)功能示例
- 教你3分鐘利用原生js實(shí)現(xiàn)有進(jìn)度監(jiān)聽的文件上傳預(yù)覽組件
- JS中實(shí)現(xiàn)一個(gè)下載進(jìn)度條及播放進(jìn)度條的代碼
相關(guān)文章
這篇文章主要介紹了JavaScript作用域與作用域鏈優(yōu)化方式,圍繞主題展開JavaScript作用域以及作用域鏈的那些事情，以及針對它們的一些我們在代碼中優(yōu)化小技巧，需要的朋友可以參考一下2022-07-07
IE6下出現(xiàn)JavaScript未結(jié)束的字符串常量錯(cuò)誤的解決方法
JavaScript文件只在IE6下出錯(cuò)（“未結(jié)束的字符串常量”）的解決辦法。2010-11-11
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)圖片剪裁并預(yù)覽效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
layer 刷新某個(gè)頁面的實(shí)現(xiàn)方法
今天小編就為大家分享一篇layer 刷新某個(gè)頁面的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要給大家介紹了關(guān)于Js利用正則表達(dá)式去除字符串的中括號的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
利用JS實(shí)現(xiàn)機(jī)器人總動(dòng)員小游戲
這篇文章主要介紹了如何利用HTML+CSS+JS編寫一個(gè)機(jī)器人總動(dòng)員小游戲,代碼簡單易懂對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-11-11
javascript中的 object 和 function小結(jié)
JavaScript的面向?qū)ο笫腔谠蔚?，所有對象都有一條屬于自己的原型鏈。Object與Function可能很多看Object instanceof Function ， Function instanceof Object都為true而迷惑，所以首先看下對象的實(shí)例。2016-08-08
這篇文章主要為大家詳細(xì)介紹了JavaScript制作簡易計(jì)算器的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
layui實(shí)現(xiàn)顯示數(shù)據(jù)表格、搜索和修改功能示例
這篇文章主要介紹了layui實(shí)現(xiàn)顯示數(shù)據(jù)表格、搜索和修改功能,結(jié)合實(shí)例形式分析了layui顯示數(shù)據(jù)表格、搜索和修改功能具體界面布局、功能實(shí)現(xiàn)相關(guān)操作技巧,需要的朋友可以參考下2020-06-06
這篇文章主要為大家整理了關(guān)于Bootstrap表單的慕課筆記，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03