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

Question

在Javascript中，当您编写如下一段代码时，计算机似乎会首先完成整个循环 100 000 次（可能需要一两秒）然后转储控制台中的所有 100 000 行一次。我怎样才能让计算机一次一行地更新控制台，每次通过循环？

澄清一下，我想实际上能够看到计算机正在做什么，而不是在它完成后才看到。

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

Answer 1

您的声明无效。 JavaScript 同步处理 for 循环。

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

Answer 2

如果你想要更流畅的输出，我建议避免使用 for 循环，而是使用 requestAnimationFrame 来管理何时打印结果。

var counter = 0;
var max = 100000;
function myPrint(){
    if(counter < max){
        console.log(counter++);
        requestAnimationFrame(myPrint);
    }
}
myPrint();

Answer 3

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

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

let 允许您声明范围限于使用它的块、语句或表达式的变量。这与 var 关键字不同，var 关键字全局定义变量，或在整个函数局部定义变量，而不管块作用域如何。

Answer 4

浏览器运行脚本同步。如果您希望页面更新为运行ning 长任务，您需要将长运行ning 同步代码分解成片段，并在处理这些片段之间放弃对浏览器的控制.这意味着您需要处理将一系列任务分解成块，并控制 return 控制浏览器的延迟。

这是一个片段，它提供了一种方法，可以让您完全做到这一点！您会注意到性能仍然不是很好，但我很确定这是由于 Whosebug 的嵌入式脚本运行ner 的 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 5

可以将一组 Promise 提供给 Observable，以实现预期的结果。 Promise 现在是 JavaScript 原生的，您可以从 RxJS 库中获取 Observable。

这是一个例子：

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));
});

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

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

How to output to console in real time in Javascript?

javascript

loops

for-loop

console.log