Question

我想要实现的目标：

用户点击元素
屏幕显示＆＃34;正在进行的计算＆＃34;屏
系统执行耗时的数学计算
屏幕显示结果（＆＃34;完成＆＃34;）

这是剥离的代码：

id

当我运行它并单击div时，需要一段时间，然后将文本更改为＆＃34;完成＆＃34;，这样用户就不会看到＆＃34;正在进行的计算＆＃34;消息 - 这是我的问题。

要强制屏幕重绘以在计算开始之前显示消息，其他线程建议修改CSS，隐藏并立即取消隐藏元素或使用setTimeout，但没有任何效果。

这将是一个绘制复杂数学对象（分形）的程序，我将使用canvas而不是div，但我简化了上面的示例。由于未来的图形界面，使用＆＃34; alert（）＆＃34;不是一个选项 - ＆＃34;正在进行的计算＆＃34;屏幕应转向＆＃34;完成＆＃34;在完成计算后立即。

Answer 1

IMO处理此问题的一种简单方法是通过计时器功能以“小”块执行计算，例如：

function calcFractal(x0, y0, x1, y1) {
    ... compute the fractal for the tile (x0, y0)-(x1, y1) ...
}

var x = 0, y = 0;

function nextTile() {
    calcFractal(x, y, x+tw, y+th);
    x += tw;
    if (x >= width) {
        x = 0;
        y += th;
    }
    if (y < height) setTimeout(nextTile, 0);
}

nextTile();

这允许您显示进度（包括例如分形的低分辨率，计算的百分比）以及允许中断（例如，在停止按钮上有onclick个事件）。

如果图块不小，则可以接受开销，仍然保持页面对重新绘制和用户交互的合理响应。

Answer 2

您需要等待一毫秒或使用工作人员进行计算。

第一个例子可能是最简单的，而不是直接调用calc，创建一个新函数

function caller() {
     // insert "calculation in progress" in the body
    setTimeout(calc, 1);
}

然后拨打caller。

Answer 3

由于现代浏览器可能会延迟重绘以获得更好的帧速率，因此具有setTimeout的版本可能无法使用过低的超时时间。

如果可能，您需要使用requestAnimationFrame。如果它不可行，那么@Bálint的答案应该可行，但是有更大的超时（在我的测试中，Firefox开始工作时超时20-30附近）。实际超时值取决于浏览器（也可能取决于系统）

function very_long_func(){
   el= document.getElementById('di');

   requestAnimationFrame( function(){
      //edit dom for new frame;
      el.textContent = 'calculation in progress' 
      //browser will wait for this functions end, before start redraw.
      //So actual calucation must run outside of it
      setTimeout( function_with_actual_calculation, 1 ); 

   })
}
function function_with_actual_calculation(){
     //..your math here + updating textContent to "done" in the end.
}

如何在JS强制重绘？

3 个答案: