a question about console.log in while loop

Question

function sleep(delay) {
  var start = new Date().getTime();
  while (new Date().getTime() - start < delay) {
    console.log({}); // this works
  }
}
function sleep1(delay) {
  var start = new Date().getTime();
  while (new Date().getTime() - start < delay) {
    console.log('???')  // this seems not work, why?
  }
}

function test() {
  console.log("111");
  sleep(2000); // which works fine
  sleep1(2000); // which won't stop
  console.log("222");
}

test();

When the input of console.log is an object it works. But when the input changes to a number, the chrome console jams. Why does this happen?

With `continue;`, `console.log('???')` is no longer reachable. May I ask why put `continue` in the first place? — Shiz, Jun 25 '21 at 03:51
"The [continue statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/continue) terminates execution of the statements in the current iteration of the current or labeled loop, and continues execution of the loop with the next iteration." — ray, Jun 25 '21 at 03:54
This isn't really relevant to your specific question, but running a while loop is a bad way to create a delay. It will block the event loop (no user input, etc.) and needlessly spin up the CPU. You might consider an [implementation](https://stackoverflow.com/questions/951021/what-is-the-javascript-version-of-sleep#39914235) that uses setTimeout to resolve a Promise instead. — ray, Jun 25 '21 at 04:08
thank you very much guys for your answer. The point I want to express is: console.log('???') will stuck but console.log({}), the chrome console will print 222. — Miyazono Kaori, Jun 25 '21 at 04:13
Can you show two different code blocks one which you say freezes the browser and the other that doesn't? Maybe that will help. — Tushar Shahi, Jun 25 '21 at 06:24
Did you try the code you've just posted? It does work fine (logs `111`, a bunch of `{}`s, a bunch of `???`s then `222`, then exits). — FZs, Jun 25 '21 at 07:30

score 1 · Accepted Answer · answered Jun 25 '21 at 07:44

Because creating an object + console.log an object spends more time than console.log a string.

So the console.log('???') executed times is extremely large, that's why your chrome process block.

You can change the sleep time to 200 or lower, it won't block.

Parvat . R · Answer 2 · 2021-06-25T07:12:05.417

The problem is in the while loop. The continue statement prevents any other statement after it to be executed.

function sleep(delay) {
  var start = new Date().getTime();
  while (new Date().getTime() - start < delay) {
    console.log({}); // this works
    console.log('???') // this too works
    continue; // this works
  }
}

function test() {
  console.log("111");
  sleep(2000);
  console.log("222");
}

test();

Take a look at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/continue

Edit

If you use the while loop, then any js code will not work till the loop gets over, even you will not be able to use the console, as the loop takes away the console. So its is recommended to use setTimeout instead of using some fancy function like sleep which are available in python. Try:


function test() {
  console.log("111");
  setTimeout(function(){
    console.log("222");
  }, 2000)
}

test();

The console jams because of too many console.log's usage and the loop is going for a large process, that is about 2000 circles around the loop.

Thank you for the answer. The code I have written at top misleads my point. If delete the line `console.log({}); // this works` in your post code, then run it, the chrome console will get stuck which is the thing that I don't understand. — Miyazono Kaori, Jun 25 '21 at 05:02
I you are about to use the console at that time, you cannot do, because already a process is going on. You will not be able to run any commands in the console the while loop gets over. So it is recommended to use `setTimeout`. — Parvat . R, Jun 25 '21 at 06:27

score 0 · Answer 3 · answered Jun 25 '21 at 06:43

It's probably because it can't keep up, so it gets stuck in the loop.

Note that, as Parvat said, using a while loop will block the whole event loop, meaning that no other code will be able to run.

If you want to use a Python-like sleep function, a possible solution taking advantage of async/await might be:

function sleep(delay) {
  return new Promise(resolve => setTimeout(resolve, delay));
}

async function test() {
  console.log("111");
  await sleep(2000);
  console.log("222");
}

test();

a question about console.log in while loop

3 Answers3