How To Output To Console In Real Time In Javascript?

May 30, 2024 Post a Comment

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

Solution 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!

functiondoHeavyTask(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 setIntervaldoTick();
  if (totalTicks > 1) interval = setInterval(doTick, totalMillisAllotted / totalTicks);
}

// Do 10,000 console.logs, in chunks of 100, within 5 secondsdoHeavyTask({
  totalMillisAllotted: 5 * 1000,
  totalTasks: 10000,
  tasksPerTick: 100,
  task: function(n) { console.log(n + 1); }
});

Solution 2:

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;
functionmyPrint(){
    if(counter < max){
        console.log(counter++);
        requestAnimationFrame(myPrint);
    }
}
myPrint();

Solution 3:

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.

Solution 4:

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() functionfor (let i = 0; i <= 25; i++) {
  const promise = newPromise((resolve) => {

    // This could be any synchronous or asynchronous codesetTimeout(() => {
      resolve(i);
    }, 1000 * i);
  });

  array.push(promise);
}

var observable = Rx.Observable.from(array);

observable.subscribe((promise) => {
  promise.then(result =>console.log(result));
});

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

Solution 5:

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

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

javascript spravka