被 JavaScript 阻止的 CSS 过渡

Question

我正在尝试在 JavaScript 的 非常 密集时期创建一个加载栏，其中构建和填充了一些非常重的 3d 数组。在用户单击按钮之前，此加载栏需要保持空白。

冻结发生无论是否我正在使用-webkit-transition（这个应用程序可以是chrome独有的，在我的情况下不需要跨浏览器）。

寻求简单我已经建立了这样的酒吧......

<div id="loader">
    <div id="thumb">
    </div>
</div>

...然后试图在我的主要for 循环的各个阶段增加该条：

for(i = 0; i < 5 ; i++){
    document.getElementById('thumb').style.width = i*25 + '%';
    //More Code
}

问题是在 JavaScript 完成之前一切都会冻结。 我在 Stack Overflow 上发现了一个类似的问题，Using CSS animation while javascript computes，并在 cmets 中找到并考虑和/或尝试了以下内容：

• 网络工作者

  不要认为它会起作用，因为我的脚本正在用对象和构造函数填充数组，其中包含根据this site 不起作用的函数

• jQuery

  不是一个选项，我不能在我的应用程序中使用外部库 - 在任何情况下，仅为加载栏导入整个库似乎有点矫枉过正......

• 关键帧

  这是有希望的，我试过了，但最后它也冻结了，所以不高兴

• timeOut()s

  想过这个，但既然加载栏的目的是减少挫败感，增加等待时间似乎适得其反

我很乐意在这个阶段有任何条增量，即使它不平滑！我很确定这不仅仅是我一个人遇到的问题 - 也许有人有一个有趣的解决方案？

P.S.：我将其作为一个新问题发布，而不是添加到引用的问题中，因为我专门寻求有关 JavaScript（而不是 jQuery）的帮助，并且如果我可以使用转换（！ =动画）在宽度上。

Answer 1

有些人已经提到你应该使用超时。这是合适的方法，因为它会让浏览器有时间“呼吸”并在任务中呈现进度条。

您必须拆分代码才能异步工作。假设你目前有这样的东西：

function doAllTheWork() {
  for(var i = 0; i < reallyBigNumberOfIterations; i++) {
    processorIntensiveTask(i);
  }
}

那么你需要把它变成这样的：

var i = 0;
function doSomeWork() {
  var startTime = Date.now();
  while(i < reallyBigNumberOfIterations && (Date.now() - startTime) < 30) {
    processorIntensiveTask(i);
    i++;
  }

  if(i < reallyBigNumberOfIterations) {
    // Here you update the progress bar
    incrementBar(i / reallyBigNumberOfIterations);

    // Schedule a timeout to continue working on the heavy task
    setTimeout(doSomeWork, 50);
  }
  else {
    taskFinished();
  }
}

function incrementBar(fraction) {
  console.log(Math.round(fraction * 100) + ' percent done');
}

function taskFinished() { console.log('Done!'); }

doSomeWork();

注意表达式(Date.now() - startTime) < 30。这意味着循环将在 30 毫秒的跨度内完成尽可能多的工作。您可以将这个数字设置得更大，但是从用户的角度来看，任何超过 100 毫秒（基本上是每秒 10 帧）的时间都会开始变得迟缓。

与同步版本相比，使用这种方法可能会花费更长的时间来完成整个任务。但是，根据用户的经验，指示 something 正在发生比在 nothing 似乎正在发生时无限期地等待要好——即使后者的等待时间更短。

Answer 2

您是否尝试过更简单并制作一个函数，比如说：

伪：

Function increment_bar(amount = 10)
{
 document.getElementById('thumb').style.width = i*amount + '%';
}

然后，无论您在哪里进行处理工作，只需每隔 x 秒或每当您在处理过程中达到某个特定点时调用该函数（比如说 10-20% 完成？）

伪：

{
    Doing_work_here;
    increment_bar(25);
    LOOP
}