[急！在线等] JS 怎么在处理多个大图数据的时候避免线程阻塞？

我正在使用 PanoJS 创建一个可以查看和修改巨大图像的平台。

我需要做的是用 canvas 渲染多个 图像切片，并且能改变图像的亮度，对比度，不透明度。

但问题是，当我运行这个 updateTiles 函数时，切片 没有被逐个更新，它们会等待所有的 tiles 被更新以后一起渲染，图像大了以后要卡住好几秒，一开始设置的 loading 透明度也在所有切片都更新以后才会生效。

希望有了解这方面的大神指点一下，多谢！

... PanoJS.prototype.updateTiles = function () { const handleCanvasUpdate = (element) => { const ctx = element.getContext('2d') const imgData = new ImageData(new Uint8ClampedArray(JSON.parse(element._imgData.data)), element._imgData.height, element._imgData.width) const changedImgData = this.changeImgData(imgData) // -1 ~ 1 ctx.putImageData(changedImgData, 0, 0); } const tag = this.showLoading('updateTiles') for (let i = 0; i < this.well.children.length; i++) { const element = this.well.children[i]; if (element.tagName.toUpperCase() === 'CANVAS') { handleCanvasUpdate(element) } } this.hideLoading(tag) } PanoJS.prototype.changeImgData = function (imgdata) { // this imgdata can be very large const data = imgdata.data; for (let i = 0; i < data.length; i += 4) { // brightness const hsv = this.rgb2hsv([data[i], data[i + 1], data[i + 2]]); hsv[2] *= 1 + this.luminance; const rgb = this.hsv2rgb([...hsv]); data[i] = rgb[0]; data[i + 1] = rgb[1]; data[i + 2] = rgb[2]; // contrast const _cOntrast= (this.contrast / 100) + 1; //convert to decimal & shift range: [0..2] const intercept = 128 * (1 - _contrast); data[i] = data[i] * _contrast + intercept; data[i + 1] = data[i + 1] * _contrast + intercept; data[i + 2] = data[i + 2] * _contrast + intercept; // opacity data[i + 3] = data[i + 3] * this.opacity; } return imgdata; } PanoJS.prototype.showLoading = function (name) { counter++ const tag = `${counter}${name}` console.time(tag) this.loadingMask.style.opacity = 1 this.loadingCount++ return tag } PanoJS.prototype.hideLoading = function (tag) { // requestAnimationFrame(() => { if (this.loadingCount) { this.loadingCount-- } // console.log(this.loadingMask.style.opacity); if (this.loadingCount === 0) { this.loadingMask.style.opacity = 0 } console.timeEnd(tag) // console.log(this.loadingCount); // }) } ...