javascript - 从递归函数强制 Canvas 重绘

Question

我想创建一个自定义进度条。但我使用递归函数来更新它的数据，我无法更新进度栏中的 Canvas 。

以下是我的部分代码:

var length = 0;

recursiveFunction = function(){
   length++;
   updateLength(length);
   //some work
   recursiveFunction();
}

updateLength = function(length){
   setLength(length);
}

setLength(length){
    var c = document.getElementById(canvas);
    var ctx = c.getContext("2d");
    ctx.fillStyle = "#fc0";
    ctx.fillRect(0, 0, length, 10);
}

所有这些函数都位于不同的 JS 文件和不同的类中。

问题是 Canvas 不会在 setLength 函数中重绘。

Answer 1

这与 JavaScript 是单线程的并且一次只能做一件事有关。只要该代码正在运行，其他所有事情(例如更新到屏幕)就必须等待。

要解决这个问题，您可以在代码中引入一些异步性，暂停代码足以允许屏幕更新。

例如(注意:如果不执行其他更改，仅此更改可能不起作用):

recursiveFunction = function(){
   length++;
   updateLength(length);
   //some work
   requestAnimationFrame(recursiveFunction);  // makes call async
}

该函数现在将结束，但会添加一个事件以供将来使用(在本例中通常为 16.7 毫秒)。同时 Canvas 可以更新到屏幕。

但当然也不是没有问题。上下文正在发生变化，由于它是一个递归函数，您可能需要传入参数。虽然帖子中没有显示哪些(如果有)，但您可以使用 setTimeout() 来代替 requestAnimationFrame()，它允许您传递参数。如果您依赖于上下文(即 this)，您也可以使用 bind()。

// example of bind
requestAnimationFrame(recursiveFunction.bind(this));

setTimeout() can take more arguments比延迟:

setTimeout(recursiveFunction.bind(this), 17, arg1, arg2, arg3, ...);

替代方法是使用 Web Workers 。这将允许您在单独的线程中尽可能快地运行代码，并偶尔向主主机发送一条包含到目前为止进度的消息，这将允许 Canvas 独立更新。如果函数长时间运行，这是推荐的路径。网络 worker 有good support但不适用于旧版 IE 或 Opera Mini。