如何在Javascript中实时输出到控制台？ [英] How to output to console in real time in Javascript?

问题描述

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

为了澄清，我想，在效果，能够看到计算机正在做什么，因为它正在做，而不是一旦它完成了。

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

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

$ b

函数doHeavyTask（params）{var totalMillisAllotted = params.totalMillisAllotted; var totalTask​​s = params.totalTask​​s; var tasksPerTick = params.tasksPerTick; var tasksCompleted = 0; var totalTicks = Math.ceil（totalTask​​s / tasksPerTick）; var interval = null; if（totalTicks === 0）return; var doTick = function（）{var totalByEndOfTick = Math.min（tasksCompleted + tasksPerTick，totalTask​​s）;做{params.task（tasksCompleted ++）; （tasksCompleted< totalByEndOfTick）; if（tasksCompleted> = totalTask​​s）clearInterval（interval）; }; //立刻打勾，然后根据需要使用setInterval doTick（）;如果（totalTicks> 1）interval = setInterval（doTick，totalMillisAllotted / totalTicks）;} //在10000秒内完成10,000个console.logs，在5秒内doDoeasyTask（{totalMillisAllotted：5 * 1000，totalTask​​s：10000，tasksPerTick：100 ，task：function（n）{console.log（n + 1）;}}）;

b

In Javascript, when you write a piece of code like the one below, it seems like the computer will first complete the entire loop 100 000 times (which can take a second or two) and THEN dump all 100 000 lines in the console in one shot. How can I make it so that the computer will update the console one line at a time, with each pass thru the loop?

To clarify, I would like to, in effect, be able to see what the computer is doing AS it is doing it, and not once it has finished doing it.

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

解决方案

Browsers run script synchronously. If you want the page to update as a long task is running, you need to break your long-running synchronous code up into pieces, and relinquish control to the browser between the processing of these pieces. This means that you need to deal with breaking a series of tasks into chunks, and controlling the delays which return control to the browser.

Here's a snippet which provides a method that allows you to do exactly this! You'll notice the performance is still not great, but I'm quite sure this is due to the slowness of stackoverflow's embedded script runner's implementation of console.log. Try using this code in the browser's actual console - the performance is great!

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

这篇关于如何在Javascript中实时输出到控制台？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！