Question

我正在尝试使用HTML画布创建一个进度条，以显示javascript中计算密集型循环的进度。我遇到的问题是画布实际上不会更新，直到整个循环结束。

我知道计算循环正在运行，并且通过在循环中插入alert，我已确定更新进度条的代码可以正常工作。似乎浏览器只是等待更新画布，直到整个计算循环完成（当然，这违背了进度条的目的）。

我试过了

只需在计算循环中调用进度条更新功能
在循环期间通过重复的window.setTimeout调用调用进度条更新功能
通过在循环开始前安排window.setInterval事件来调用进度条更新功能。

但是没有效果 - 进度条在计算循环结束前保持为空，然后立即跳转到满。

这是我的代码的精简版本。我试图同时显示所有三种解决方案（当然，我一次只实现了三种解决方案中的一种）：

function calculateStuff(progressCallback) {
    var x = 0, y = 0;
    var total = N[0]*N[1];

    // Solution #3: Schedule repeated calls using setInterval
    // var intervalID = window.setInterval(progressCallback, 0, N[0]*y/total);

    for (y = 0; y < N[1]; y++) {
        for (x = 0; x < N[0]; x++) {
            // Do computationally-intensive stuff here
        }
//      Solution #1 - Just directly call the progress bar updater during the loop
//      progressCallback(N[0]*y/total);
//      Solution #2 - Schedule a progress bar update using setTimeout
//      window.setTimeout(progressCallback, 0, N[0]*y/total);
    }

//  Solution #1:
//  progressCallback(N[0]*y/total);
//  Solution #3:
//  window.clearInterval(intervalID)
    return resultOfComputation;
}

function setProgress(f) {
//  Input: f - float between 0 and 1 indicating progress
//  Setting off an alert allow me to see that this function does in fact update the progress bar.
//  alert("Progress!");
    progressCtx.clearRect(0, 0, progressCanvas.width, progressCanvas.height);
    progressCtx.fillStyle = "blue";
    progressCtx.fillRect(0, 0, progressCanvas.width * f, progressCanvas.height);
}

var result = calculateStuff(setProgress);

为了记录，我已经阅读了以下似乎重复的问题：this和this以及this，但这些解决方案似乎都不起作用。

感谢您的帮助！

强制浏览器在计算循环期间在画布上显示更改

0 个答案: