由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上发现了类似的问题,在javascript计算时使用CSS动画,并在评论中找到并考虑和/或尝试了以下内容:

• 网络工作者

  不要认为它会工作,因为我的剧本是填充物和含有根据功能的构造数组这个网站是行不通的

• jQuery的

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

• 关键帧

  这很有希望,我试过了,但最后它也冻结了,所以没有快乐

• timeOut()小号

  想到这一点,但由于装载栏的目的是减少挫折感,增加等待时间似乎适得其反

我很高兴在这个阶段有任何增加的条,即使它不顺利!我很确定这是一个不仅仅是我的问题 - 也许有人有一个有趣的解决方案？

PS:我发布这个作为一个新问题,而不是添加到引用的问题,因为我特别寻求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帧)的任何东西都会开始变得迟钝.

使用这种方法而不是同步版本,整个任务可能会花费更长的时间.然而,从用户的经验来看,有迹象表明事情发生的事情比无限期等待更好,而似乎没有发生任何事情 - 即使后者的等待时间更短.