javascript - 使用 JavaScript 中的异步函数和 promise 正确处理重型双 for 循环

Question

我是 JavaScript 中异步函数和承诺的新手。我想在显示其进度的同时逐步完成双 for 循环。到目前为止，我无法让它更新进度，而且似乎比我之前使用的香草双 for 循环花费了更多的时间，同时还很费力（我在这台 Mac 上得到了旋转的沙滩球）。它只显示最后的进度。

async function render(autoZoomAndPan) {

    let zoom = setZoom * quality

    for(var x=0; x < renderSize.w; x++){

        for(var y=0; y < renderSize.h; y++){

            await draw(x,y,zoom)

            if(!autoZoomAndPan){
                let allLoops = renderSize.w * renderSize.h
                let currentLoops = x * y
                var percent = (currentLoops / allLoops) * 100 
                document.getElementById('debug1').innerHTML ="<h3>Processed:" + percent + "%</h3>";
            }


        }           
    }

}      

function draw(x,y,zoom){

    return new Promise(resolve => {
        var i = 0                           
        var cx = -xCoord + x / zoom                 
        var cy = -yCoord + y / zoom                                        
        var zx = 0                          
        var zy = 0           


        do{                                 
            var xt = zx * zy;                                   
            zx = zx * zx - zy * zy + cx;                                    
            zy = zyMult * xt + cy;  

            i++;
        }               
        while(i < (palletteSize - 1) && (zx * zx + zy * zy) < (pixelSize * quality));                           

        context.beginPath();

        context.fillStyle = pallette[i]

        context.fillRect(x*pixelSize, y*pixelSize, pixelSize, pixelSize); 

        resolve('resolved');

    })

}     

render(false)

标签： javascriptfor-looppromiseasync-awaitdo-while