Правильно обрабатывать тяжелый двойной цикл for с асинхронной функцией и обещанием в JavaScript - PullRequest
Новая
       15

Правильно обрабатывать тяжелый двойной цикл for с асинхронной функцией и обещанием в JavaScript

1 голос
/ 24 апреля 2019

Я новичок в асинхронных функциях и обещаниях в JavaScript.Я хотел бы пройти через двойной цикл, показывая его прогресс.До сих пор я не могу заставить его обновлять прогресс, и кажется, что он занимает намного больше времени, чем ванильный дубль за цикл, который у меня был до этого, при этом оставаясь налоговым (я получаю вращающийся пляжный мяч на этом 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)
...