javascript - 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 ，并在评论中找到并考虑和/或尝试了以下内容:

• 网络 worker

  不要认为它会起作用，因为我的脚本正在用包含根据 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 毫秒的时间内完成尽可能多的工作。您可以使这个数字更大，但是从用户的 Angular 来看，任何超过 100 毫秒(基本上每秒 10 帧)的东西都会开始感觉迟钝。

与同步版本相比，使用这种方法完成整个任务可能会花费更长的时间。然而，从用户的体验来看，指示某事正在发生总比无限期等待什么都没有要好——即使后者的等待时间更短。