Question

我有一个非常繁重的图形问题要执行，我需要能够显示屏幕上的进度条，并且还要阻止浏览器获取＆＃34;冻结＆＃34;。我知道紧密循环阻塞了UI，JavaScript是单线程的，所以我使用setTimeout来执行一些图形测试，如下所示：

function FG_ShowHM(y) {
   for(var x=0 ; x<100 ; x++) {
     if(FG_TreeH[y*100+x]=="") { 
       FG_hmctx.fillStyle = "rgba(255,255,255,1)"; 
     }
     else { 
       var col=DegToCol(FG_min,FG_max,FG_TreeH[y*100+x]);
       FG_hmctx.fillStyle = "rgba("+col.r+","+col.g+",0,1)"; 
     }

     FG_hmctx.fillRect(x*3,y*3,3,3);
   }

   ProgBT+=0.5;
   y++; 

   if(y<100) { 
    window.setTimeout(FG_ShowHM(y),100);  // move on
   }
   else { 
     XPW(); 
   }
 }

从另一个函数中调用该函数：

window.setTimeout(FG_ShowHM(0));

注意： PW（）只是jQuery函数的快捷方式，可以创建＆＃34;请稍候，XPW只是删除＆＃34;请等待＆＃34的快捷方式;窗口。

由于某种原因，用户界面仍然是堆栈，没有可能显示任何进展，更重要的是，几秒钟后浏览器完全停止＆＃34;冻结＆＃34; ... 我已经尝试了很多方法来解决这个问题，但是没有成功....我想知道在这么长的操作中显示进度的最佳方法是什么，或者至少阻止浏览器获取＆＃34;冻结＆＃34 ;.

提前致谢。

Answer 1

问题在于您使用window.setTimeout的方式。作为第一个参数，它期望一个函数和一个数字作为第二个。执行window.setTimeout(FG_ShowHM(y),100);时，您实际上并未将函数作为参数传递，而是执行该函数，执行结果将传递给window.setTimeout。结果 - 你有一个无限的递归。要解决此问题 - 请更正调用window.setTimeout至

的方式

window.setTimeout(function() { FG_ShowHM(y) }, 100);

注意：您的代码中有很多地方使用此类window.setTimeout。所以请注意。

详细了解window.setTimeout here。

跟踪javascript漫长过程中的进度

1 个答案: