Question

在Javascript中，当你编写一段代码如下所示时，似乎计算机将首先完成整个循环10万次（可能需要一两秒钟），然后将所有10万行转储到一次性控制台。我怎样才能使计算机一次更新一个控制台，每次通过循环？

为了澄清，我想，实际上，我想能够看到计算机在做什么，而不是一旦它完成了它。

＆＃13;

for (var i = 1; i <= 100000; i++) {
  console.log(i);
}

＆＃13;

Answer 1

浏览器同步运行脚本。如果您希望在长任务运行时更新页面，则需要将长时间运行的同步代码分解为多个部分，并在处理这些部分之间放弃对浏览器的控制。这意味着您需要处理将一系列任务分解为块并控制将控制权返回给浏览器的延迟。

这是一个片段，它提供了一种方法，可以让你做到这一点！您会注意到性能仍然不是很好，但我很确定这是由于stackoverflow的嵌入式脚本运行程序console.log的实现缓慢。尝试在浏览器的实际控制台中使用此代码 - 性能非常好！

function doHeavyTask(params) {
  var totalMillisAllotted = params.totalMillisAllotted;
  var totalTasks = params.totalTasks;
  var tasksPerTick = params.tasksPerTick;
  var tasksCompleted = 0;
  var totalTicks = Math.ceil(totalTasks / tasksPerTick);
  var interval = null;
        
  if (totalTicks === 0) return;
  
  var doTick = function() {
    var totalByEndOfTick = Math.min(tasksCompleted + tasksPerTick, totalTasks);
  
    do {
      params.task(tasksCompleted++);
    } while(tasksCompleted < totalByEndOfTick);
     
    if (tasksCompleted >= totalTasks) clearInterval(interval);
  };
  
  // Tick once immediately, and then as many times as needed using setInterval
  doTick();
  if (totalTicks > 1) interval = setInterval(doTick, totalMillisAllotted / totalTicks);
}

// Do 10,000 console.logs, in chunks of 100, within 5 seconds
doHeavyTask({
  totalMillisAllotted: 5 * 1000,
  totalTasks: 10000,
  tasksPerTick: 100,
  task: function(n) { console.log(n + 1); }
});

Answer 2

如果您想要更顺畅的输出，我建议避免使用for循环，而是使用<button id="button1" onclick="Click();">ok</button> <script> var buttonClick = false; function Click() { if (buttonClick) { return; } else { buttonClick = true; //todo alert("ok"); //buttonClick = false; } } </script>来管理何时打印结果。

requestAnimationFrame

Answer 3

for (let i = 1; i <= 10; i++) {
  //console.log(i);
  setTimeout(function(){console.log(i)},i*1000);
}

这是你如何延迟你的控制台。使用setTimeout在1秒（1000毫秒）后检查console.log值的值。

允许您将范围有限的变量声明为使用它的块，语句或表达式。这与var关键字不同，var关键字全局定义变量，或者无论块范围如何都在本地定义整个函数。

Answer 4

可以向Observable提供Promise数组，以达到预期的结果。 Promise现在是JavaScript的原生，您可以从RxJS库中获取Observable。

以下是一个例子：

＆＃13;

const array = [];

// This could also be a for of loop or a .map() function
for (let i = 0; i <= 25; i++) {
  const promise = new Promise((resolve) => {

    // This could be any synchronous or asynchronous code
    setTimeout(() => {
      resolve(i);
    }, 1000 * i);
  });

  array.push(promise);
}

var observable = Rx.Observable.from(array);

observable.subscribe((promise) => {
  promise.then(result => console.log(result));
});

＆＃13;

<script src="https://unpkg.com/rxjs/bundles/Rx.min.js"></script>

＆＃13;

Answer 5

您的陈述无效。 JavaScript同步处理for循环。

请检查以下问题：JavaScript, Node.js: is Array.forEach asynchronous?

如何在Javascript中实时输出到控制台？

5 个答案: