CSS 转换被 JavaScript 阻止

我正在尝试在veryJavaScript 的密集期，其中构建并填充了一些相当重的 3d 数组。该加载栏需要保持为空，直到用户单击按钮。

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

为了寻求简单性，我像这样建造了我的酒吧......

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

...然后试图在我的主要阶段的各个阶段增加该标准for loop:

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

问题是一切都会冻结，直到 JavaScript 完成。 我在 Stack Overflow 上发现了类似的问题，在 javascript 计算时使用 CSS 动画 https://stackoverflow.com/questions/12752864/using-css-animation-while-javascript-computes，并在评论中发现并考虑和/或尝试了以下内容：

• 网络工作者

  不要认为它会起作用，因为我的脚本正在用对象和构造函数填充一个数组，其中包含根据这个网站 https://developer.mozilla.org/en-US/docs/DOM/Using_web_workers不会起作用

• jQuery

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

• 关键帧

  这很有希望，我尝试过，但最终它也冻结了，所以没有喜悦

• timeOut()s

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

我很乐意拥有any在这个阶段酒吧的增量，即使它并不顺利！我很确定这个问题不仅仅困扰着我——也许有人有一个有趣的解决方案？

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

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

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

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 帧）的内容都会开始感觉迟缓。

与同步版本相比，使用此方法的总体任务可能确实需要更长的时间。然而，从用户的经验来看，有迹象表明某物正在发生的事情比无限期地等待要好nothing似乎正在发生——即使后者的等待时间更短。