Question

我正在尝试使用回调来创建一个异步函数，该函数在绘制循环后进行计算而不会减慢它。我已经阅读了很多回调示例，显然做错了。

我已经创建了我想要做的简化版本。当您单击鼠标时，它应该进行数学运算而不会挂起绘制循环。现在它导致挂断：

＆＃13;

var nPoints = 1;
var sumDone = false;
var sum = 0;

function setup() {
    var myCanvas = createCanvas(200, 200);
    myCanvas.parent("p5");
}

function draw(){
  nPoints = nPoints+1
  stroke(0,0,0);
  background(245,245,245);
  noFill();
  rect(1,1,198,198);
  textAlign(CENTER);
  fill(0,0,0);
  textSize(20);
  if(sumDone){
    text(sum,100,20);
  }else{
    text("not done",100,20);
  }
  noStroke();
  push();
  translate(100,100);
  rotate(nPoints/50);

  rect(-50,-10,100,20);
  pop();
  
}

function mouseClicked(){
  if(sumDone){
    sumDone = false;
    sum=0;
  }else{
    doMath(function (){
      sumDone = true;
    });
  }
}

function doMath(callback){
    for(var i=0;i<10000000;i++){
      sum = sum + i;
    }
  callback();
}

＆＃13;

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.js"></script>


<body>
  <div id="p5" align="center">
  </div>
  <script>
    <!-- JAVASCRIPT CODE GOES HERE -->
  </script>
</body>

＆＃13;

正如您所看到的，数学仍然完全挂起了绘制循环。是否可以以不影响绘制循环的方式执行此操作？

Answer 1

JavaScript是单线程的。将工作移动到回调函数只会占用用于运行draw()的线程和其他所有JavaScript函数。

卸载这样的工作的唯一方法是在服务器上执行此操作并使用AJAX查询结果。

除此之外，或许可以尝试将计算分解为更小的块。你能做到每帧10％的计算吗？

修改： These threads提及您可能会考虑的网络工作者的概念。

使用javascript回调在后台完成计算

1 个答案: