How to output to console in real time in Javascript?

Question

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

Answer 1

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

Answer 2

Your statement is not valid. JavaScript handles the for loop synchronously.

Please check the following question: JavaScript, Node.js: is Array.forEach asynchronous?

Answer 3

If you want a smoother output, I would suggest avoiding the for loop, and instead use requestAnimationFrame which will manage when to print out the results.

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

Answer 4

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

here is how you can delay your console. use setTimeout to check the value of console.log value after 1sec(1000ms).

let allows you to declare variables that are limited in scope to the block, statement, or expression on which it is used. This is unlike the var keyword, which defines a variable globally, or locally to an entire function regardless of block scope.

Answer 5

One could feed an array of Promises to an Observable in order to achieve the desired outcome. Promises are now native to JavaScript and you can get the Observable from the RxJS library.

Here is an example:

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>