基于ID对比增删ObjectArray数据对象时的偶发阻塞问题排查求助
基于ID对比增删ObjectArray数据对象时的偶发阻塞问题排查求助
我写了一个数组更新函数,传入两个参数:一个是存储数据对象的currentDataObjectArray,另一个是定义更新后数组结构的模板数组newDataElements。所有对象都带有ID,我的思路是通过ID对比,找出newDataElements里新增的对象(去加载对应数据加入现有数组),以及currentDataObjectArray里过时的对象(从数组中移除)。
这个逻辑大部分时候都能正常运行,但偶尔会出现程序卡住的情况,我实在找不到代码里的薄弱点,想请教大家帮忙排查。
下面是经过Barmar优化后的代码:
核心更新函数
async function UpdateDataObjectArray(currentDataObjectArray, newDataElements){ const newIds = newDataElements.map(el => el.id); const currentIds = currentDataObjectArray.map(el => el.id); const newDataObjects = newIds.filter(x => !currentIds.includes(x)); // 新增对象的ID集合 const oldDataObjects = currentIds.filter(x => !newIds.includes(x)); // 需要移除的对象ID集合 const filtered = newDataElements.filter(el => newDataObjects.includes(el.id)); // 移除过时的数据对象 for(let i in oldDataObjects){ const idx = currentDataObjectArray.findIndex(el => el.id === oldDataObjects[i]); currentDataObjectArray.splice(idx, 1); } // 加载并新增数据对象 if(newDataObjects.length > 0){ let data = await LoadData(filtered); currentDataObjectArray.push(...data); data = null; } return currentDataObjectArray; // 返回更新后的数组 }
数据加载函数
async LoadData(newImages){ const ids = newImages.map(el => el.id); const loader = new THREE.ImageBitmapLoader(); // 基于Three.js的加载器 const sharedImageDatas = await Promise.all( ids.map(async (id) => { const url = app_constants.SECOND_IMAGE_LIBRARY + id; let image = await loader.loadAsync(url); let canvas = new OffscreenCanvas(image.width, image.height); let context = canvas.getContext('2d'); context.drawImage( image, 0, 0 ); let imageData = context.getImageData(0, 0, image.width, image.height); const data = new Uint8Array(new SharedArrayBuffer(imageData.data.length)); data.set(imageData.data, 0); // 手动释放引用 image = canvas = context = imageData = null; return {id, data}; }) ); return sharedImageDatas; }
我现在最困惑的就是,明明大部分时候运行都正常,但偶尔会出现阻塞,想请大家帮忙看看这段代码里可能存在什么潜在问题?
备注:内容来源于stack exchange,提问作者Spiri
相关产品推荐
相关产品推荐

