Как это работает?

Question

[Константин]

let i = 0;

let start = Date.now();

function count() {

  // делаем часть тяжёлой работы (*)
  do {
    i++;
  } while (i % 1e6 != 0);

  if (i == 1e9) {
    alert("Done in " + (Date.now() - start) + 'ms');
  } else {
    setTimeout(count); // планируем новый вызов (**)
  }

}

count();

Правильно понимаю?

Вначале идет вызов функции, затем начинается выполняться этот код

do {
    i++;
  } while (i % 1e6 != 0);

и выполняется он до тех пор, пока истинно условие.
Как только условие ложно, то выполнение переходит на

if (i == 1e9) {
    alert("Done in " + (Date.now() - start) + 'ms');
  } else {
    setTimeout(count); // планируем новый вызов (**)
  }

А тут, если i = 1e9 происходит то, что внутри первых скобок, иначе вызов СетТаймаут.

Так? Не понимаю логику. На learn.js они не объясняют, как работают их программы.

Помогите понять, пожалуйста.

Comments

[Вадим]

А почему бы не расставить console.log (или точки останова\брэйкопинты - если умеете) и самому не проверить порядок выполнения?

[Константин]

Вадим, я не знаю, как консолью пользоваться и что писать, чтобы увидеть порядок выполнения

[Константин]

Вадим, console.log(count) - так?

[Вадим]

Константин, ну отлично, значит нашли ещё одну точку роста для Вас.
Навык отладки - один из важнейших.
Не будете же Вы каждый раз по любой мелочи задавать вопрос тут и ждать ответа или бежать к коллегам?
https://learn.javascript.ru/debugging-chrome

[Вадим]

Константин,

let i = 0;

let start = Date.now();
function count() {
  console.log('начало работы функции count')
  // делаем часть тяжёлой работы (*)
  do {
    i++;
  } while (i % 1e6 != 0);

  console.log('перед условием')
  if (i == 1e9) {
    console.log('Если истина')
    alert("Done in " + (Date.now() - start) + 'ms');
  } else {
    console.log('Если не истина')
    setTimeout(count); // планируем новый вызов (**)
  }
  
}

console.log('вызов count')
count();

Answer 1

[Rsa97]

Это просто демонстрация того, как выполнять длинные циклические вычисления без подвешивания браузера.
Функция делает миллион проходов цикла, затем проверяет, достиг ли счётчик миллиарда. Если достиг, то выводит сообщение и завершается. Если нет, то функция ставит себя в очередь макрозадач вызовом setTimeout с нулевым временем. Перед повторным вызовом функции из очереди будут выполнены все накопившиеся за время работы цикла макро- и микрозадачи (события, промисы, другие сработавшие таймауты и интервалы).

Comments

[Константин]

Спасибо!

[Константин]

А с этим можете помочь? Как это работает

let i = 0;

let start = Date.now();

function count() {

  // перенесём планирование очередного вызова в начало
  if (i < 1e9 - 1e6) {
    setTimeout(count); // запланировать новый вызов
  }

  do {
    i++;
  } while (i % 1e6 != 0);

  if (i == 1e9) {
    alert("Done in " + (Date.now() - start) + 'ms');
  }

}

count();

Здесь же должен быть бесконечный цикл, т.к. i всегда меньше чем 1e9 - 1e6, тогда как это вообще может работать? Бесконечный запуск одного и того же кода должен быть в СетТаймаут...

[Rsa97]

Константин, Да так же работает, только сначала проверяется, что надо вызвать функцию ещё раз, а потом уже идёт цикл.
А i в какой-то момент будет равна 1e9-1e6, функция не будет поставлена в очередь, в цикле прибавится 1e6 и значение i станет равным 1e9, выведется сообщение.
Если вам сложно представить такие числа, то замените 1e6 на 4, а 1e6 на 2 и с бумажкой и карандашом пройдите по функции и распишите, как и что меняется на каждом шаге.

[Константин]

Rsa97, Спасибо

[WbICHA]

Константин,

Здесь же должен быть бесконечный цикл

Нет. Почитай про микро и макро задачи в жс.
То, что в таймауте, будет ждать своей очереди.