Подробно о цикле событий в JavaScript

console.log("Первый");
console.log("Второй");
console.log("Третий");

console.log("Начало программы");
 
setTimeout(() => {
  console.log("Прошла 1 секунда");
}, 1000);
 
console.log("Конец программы");

Начало программы
Конец программы
Прошла 1 секунда

function блокирующаяОперация() {
  const начало = Date.now();
  while (Date.now() - начало < 3000) {
    // Интенсивные вычисления в течение 3 секунд
  }
}
 
console.log("Начало");
блокирующаяОперация();
console.log("Конец"); // Этот вывод появится только через 3 секунды

function найтиЗаписи(запрос) {
  // Предположим, что это занимает несколько секунд
  return база.искать(запрос);
}
 
const результаты = найтиЗаписи("JavaScript");
отобразитьРезультаты(результаты);

function найтиЗаписи(запрос, колбэк) {
  setTimeout(() => {
    const результаты = база.искать(запрос);
    колбэк(результаты);
  }, 0);
}
 
найтиЗаписи("JavaScript", отобразитьРезультаты);
// Интерфейс остаётся отзывчивым во время поиска

getData(function(a) {
  getMoreData(a, function(b) {
    getEvenMoreData(b, function(c) {
      getYetEvenMoreData(c, function(d) {
        getFinalData(d, function(finalData) {
          // Наконец-то получили нужные данные
          console.log(finalData);
        });
      });
    });
  });
});

getData()
  .then(a => getMoreData(a))
  .then(b => getEvenMoreData(b))
  .then(c => getYetEvenMoreData(c))
  .then(d => getFinalData(d))
  .then(finalData => {
    console.log(finalData);
  })
  .catch(error => {
    console.error("Произошла ошибка:", error);
  });

async function получитьВсеДанные() {
  try {
    const a = await getData();
    const b = await getMoreData(a);
    const c = await getEvenMoreData(b);
    const d = await getYetEvenMoreData(c);
    const finalData = await getFinalData(d);
    console.log(finalData);
  } catch (error) {
    console.error("Произошла ошибка:", error);
  }
}

// Основной скрипт
const worker = new Worker('heavy-calculations.js');
 
worker.onmessage = function(event) {
  console.log('Результат вычислений:', event.data);
};
 
worker.postMessage({data: complexData});

// heavy-calculations.js
self.onmessage = function(event) {
  const result = performHeavyCalculations(event.data.data);
  self.postMessage(result);
};

function обработатьДанные(данные, начальныйИндекс = 0, шаг = 1000) {
  const конечныйИндекс = Math.min(начальныйИндекс + шаг, данные.length);
  
  // Обрабатываем часть данных
  for (let i = начальныйИндекс; i < конечныйИндекс; i++) {
    // Какая-то сложная обработка
    данные[i] = данные[i] * 2;
  }
  
  // Если остались данные, планируем следующую часть
  if (конечныйИндекс < данные.length) {
    setTimeout(() => {
      обработатьДанные(данные, конечныйИндекс, шаг);
    }, 0);
  } else {
    console.log('Обработка завершена!');
  }
}
 
// Запускаем обработку большого массива данных
const огромныйМассив = new Array(1000000).fill(1);
обработатьДанные(огромныйМассив);

console.log('Скрипт начался');
 
setTimeout(function() {
  console.log('Таймер 1');
}, 0);
 
Promise.resolve().then(function() {
  console.log('Промис 1');
}).then(function() {
  console.log('Промис 2');
});
 
setTimeout(function() {
  console.log('Таймер 2');
}, 0);
 
console.log('Скрипт закончился');

Скрипт начался
Скрипт закончился
Промис 1
Промис 2
Таймер 1
Таймер 2

console.log('Синхронный код');
 
setTimeout(() => {
console.log('Таймер (макрозадача) 1');
 
Promise.resolve().then(() => {
  console.log('Промис (микрозадача) внутри таймера');
});
}, 0);
 
Promise.resolve().then(() => {
console.log('Промис (микрозадача) 1');
 
setTimeout(() => {
  console.log('Таймер (макрозадача) внутри промиса');
}, 0);
});
 
setTimeout(() => {
console.log('Таймер (макрозадача) 2');
}, 0);
 
Promise.resolve().then(() => {
console.log('Промис (микрозадача) 2');
});
 
console.log('Еще синхронный код');

Синхронный код
Еще синхронный код
Промис (микрозадача) 1
Промис (микрозадача) 2
Таймер (макрозадача) 1
Промис (микрозадача) внутри таймера
Таймер (макрозадача) 2
Таймер (макрозадача) внутри промиса

console.log('Первый');
 
requestAnimationFrame(() => {
console.log('Перед рендерингом');
});
 
setTimeout(() => {
console.log('Таймер');
}, 0);
 
Promise.resolve().then(() => {
console.log('Промис');
});
 
queueMicrotask(() => {
console.log('Микрозадача');
});
 
console.log('Последний');

Первый
Последний
Промис
Микрозадача
Перед рендерингом
Таймер

console.time('всё выполнение');
 
console.time('синхронная часть');
// Синхронный код
console.timeEnd('синхронная часть');
 
Promise.resolve().then(() => {
console.time('микрозадача');
// Микрозадача
console.timeEnd('микрозадача');
});
 
setTimeout(() => {
console.time('макрозадача');
// Макрозадача
console.timeEnd('макрозадача');
 
console.timeEnd('всё выполнение');
}, 0);

console.log('Старт');
const startTime = Date.now();
 
setTimeout(() => {
  console.log(`Таймер сработал через: ${Date.now() - startTime} мс`);
}, 100);
 
// Создаём блокировку на 200 мс
const blockUntil = startTime + 200;
while (Date.now() < blockUntil) {
  // Интенсивные вычисления
}
 
console.log(`Блокировка закончилась через: ${Date.now() - startTime} мс`);

Старт
Блокировка закончилась через: 201 мс
Таймер сработал через: 202 мс

function debounce(func, wait) {
  let timeout;
  
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}
 
// Использование
const efficientResize = debounce(() => {
  console.log('Окно изменило размер');
  // Сложные вычисления
}, 250);
 
window.addEventListener('resize', efficientResize);

function throttle(func, limit) {
  let inThrottle;
  
  return function(...args) {
    if (!inThrottle) {
      func(...args);
      inThrottle = true;
      
      setTimeout(() => {
        inThrottle = false;
      }, limit);
    }
  };
}
 
// Использование
const efficientScroll = throttle(() => {
  console.log('Прокрутка');
  // Обработка прокрутки
}, 100);
 
window.addEventListener('scroll', efficientScroll);

console.log('① Начало скрипта');
 
setTimeout(() => console.log('Таймер'), 0);
 
Promise.resolve()
  .then(() => {
    console.log('Промис 1');
    return Promise.resolve();
  })
  .then(() => {
    console.log('Промис 2');
    setTimeout(() => console.log('Таймер внутри промиса'), 0);
  });
 
Promise.resolve()
  .then(() => console.log('Ещё один промис'));
 
console.log('Конец скрипта');

Начало скрипта
Конец скрипта
Промис 1
Промис 2
Ещё один промис
Таймер
Таймер внутри промиса

async function демоАсинхронности() {
  console.log('В начале функции');
  
  // await приостанавливает выполнение функции, но не блокирует JS
  const результат = await новыйПромис();
  
  console.log(`Результат: ${результат}`);
}
 
function новыйПромис() {
  return new Promise(resolve => {
    console.log('Внутри промиса');
    resolve('готово');
  });
}
 
console.log('Перед вызовом функции');
демоАсинхронности();
console.log('После вызова функции');

Перед вызовом функции
В начале функции
Внутри промиса
После вызова функции
Результат: готово

function анимация() {
  const элемент = document.getElementById('анимированный');
  let позиция = 0;
  
  function шаг() {
    позиция += 2;
    элемент.style.transform = `translateX(${позиция}px)`;
    
    if (позиция < 300) {
      // Планируем следующий шаг перед следующим обновлением экрана
      requestAnimationFrame(шаг);
    }
  }
  
  requestAnimationFrame(шаг);
}

function обработатьДанные(данные) {
  console.log('Начинаем обработку');
  
  // Это заблокирует интерфейс на несколько секунд
  const результат = данные
    .sort((a, b) => a - b)
    .filter(x => x > 0)
    .map(x => x * 2);
  
  console.log('Обработка завершена');
  return результат;
}
 
// Генерация большого массива
const огромныйМассив = Array.from({ length: 1000000 }, () => 
  Math.floor(Math.random() * 1000)
);
 
// Вызов функции заблокирует интерфейс
const результат = обработатьДанные(огромныйМассив);

function обработатьДанныеПоЧастям(данные, колбэкПрогресса, колбэкЗавершения) {
  console.log('Начинаем обработку');
  
  const всегоЭлементов = данные.length;
  let обработано = 0;
  const размерПорции = 10000;
  const результат = [];
  
  function обработатьПорцию() {
    // Берём следующую порцию данных
    const конец = Math.min(обработано + размерПорции, всегоЭлементов);
    const порция = данные.slice(обработано, конец);
    
    // Обрабатываем порцию
    const частичныйРезультат = порция
      .sort((a, b) => a - b)
      .filter(x => x > 0)
      .map(x => x * 2);
    
    результат.push(...частичныйРезультат);
    обработано = конец;
    
    // Сообщаем о прогрессе
    колбэкПрогресса(Math.floor((обработано / всегоЭлементов) * 100));
    
    // Если ещё не всё обработано, планируем следующую порцию
    if (обработано < всегоЭлементов) {
      setTimeout(обработатьПорцию, 0);
    } else {
      console.log('Обработка завершена');
      колбэкЗавершения(результат);
    }
  }
  
  // Запускаем обработку первой порции
  setTimeout(обработатьПорцию, 0);
}
 
// Использование
обработатьДанныеПоЧастям(
  огромныйМассив,
  (процент) => {
    console.log(`Прогресс: ${процент}%`);
    // Обновить индикатор прогресса в UI
  },
  (результат) => {
    console.log(`Получен результат с ${результат.length} элементами`);
    // Отобразить результат в UI
  }
);

// основной скрипт (main.js)
const worker = new Worker('worker.js');
 
worker.onmessage = function(event) {
  console.log('Воркер завершил работу:', event.data);
  document.getElementById('результат').textContent = 
    [INLINE]Обработано ${event.data.length} элементов[/INLINE];
};
 
worker.onerror = function(error) {
  console.error('Ошибка в воркере:', error);
};
 
// Отправляем данные воркеру
worker.postMessage(огромныйМассив);
console.log('Данные отправлены воркеру');

// worker.js
self.onmessage = function(event) {
  const данные = event.data;
  console.log(`Получено ${данные.length} элементов для обработки`);
  
  // Здесь могут быть любые тяжёлые вычисления
  const результат = данные
    .sort((a, b) => a - b)
    .filter(x => x > 0)
    .map(x => x * 2);
  
  // Отправляем результат обратно
  self.postMessage(результат);
};

const контроллер = new AbortController();
const сигнал = контроллер.signal;
 
// Кнопка для отмены запроса
document.getElementById('отмена').addEventListener('click', () => {
  контроллер.abort();
  console.log('Запрос отменён пользователем');
});
 
async function загрузитьДанные() {
  try {
    console.log('Начинаем загрузку данных...');
    
    const ответ = await fetch('https://api.example.com/data', {
      signal: сигнал // передаём сигнал для возможности отмены
    });
    
    const данные = await ответ.json();
    console.log('Данные успешно загружены:', данные);
    
    return данные;
  } catch (ошибка) {
    if (ошибка.name === 'AbortError') {
      console.log('Запрос был отменён');
    } else {
      console.error('Ошибка при загрузке:', ошибка);
    }
  }
}
 
загрузитьДанные();

console.log('Запуск');
 
// Самый низкий приоритет - macrotask
setTimeout(() => {
  console.log('setTimeout - низкий приоритет');
}, 0);
 
// Средний приоритет - перед перерисовкой
requestAnimationFrame(() => {
  console.log('requestAnimationFrame - средний приоритет');
});
 
// Высокий приоритет - microtask
queueMicrotask(() => {
  console.log('queueMicrotask - высокий приоритет');
});
 
// Очень высокий приоритет - microtask из Promise
Promise.resolve().then(() => {
  console.log('Promise.then - очень высокий приоритет');
});
 
console.log('Синхронный код завершён');

Запуск
Синхронный код завершён
Promise.then - очень высокий приоритет
queueMicrotask - высокий приоритет
requestAnimationFrame - средний приоритет
setTimeout - низкий приоритет

function найтиПростыеЧисла(до) {
  const простыеЧисла = [];
  outer: for (let число = 2; число <= до; число++) {
    for (let делитель = 2; делитель <= Math.sqrt(число); делитель++) {
      if (число % делитель === 0) continue outer;
    }
    простыеЧисла.push(число);
  }
  return простыеЧисла;
}
 
// Эта строчка заблокирует интерфейс на ощутимое время
const результат = найтиПростыеЧисла(10000000);

function найтиПростыеЧислаПоЧастям(до, обработчикПрогресса, обработчикЗавершения) {
  const простыеЧисла = [];
  let текущее = 2;
  
  function обработатьПорцию() {
    const началоПакета = текущее;
    // Обрабатываем не более 10000 чисел за раз
    const конечнаяТочка = Math.min(текущее + 10000, до);
    
    outer: for (; текущее <= конечнаяТочка; текущее++) {
      for (let делитель = 2; делитель <= Math.sqrt(текущее); делитель++) {
        if (текущее % делитель === 0) continue outer;
      }
      простыеЧисла.push(текущее);
    }
    
    // Сообщаем о прогрессе
    const процентЗавершения = Math.floor((текущее / до) * 100);
    обработчикПрогресса(процентЗавершения);
    
    if (текущее <= до) {
      // Планируем следующую порцию на следущую итерацию цикла событий
      setTimeout(обработатьПорцию, 0);
    } else {
      // Завершаем и возвращаем результат
      обработчикЗавершения(простыеЧисла);
    }
  }
  
  // Запускаем первую порцию
  setTimeout(обработатьПорцию, 0);
}

// Функция для ограничения частоты вызовов (throttle)
function тротлинг(функция, задержка) {
  let последнийВызов = 0;
  return function(...аргументы) {
    const сейчас = new Date().getTime();
    if (сейчас - последнийВызов > задержка) {
      последнийВызов = сейчас;
      функция.apply(this, аргументы);
    }
  };
}
 
// Применим к обработчику прокрутки
window.addEventListener('scroll', тротлинг(function() {
  // Тяжёлые вычисления при прокрутке
  console.log('Обрабатываем прокрутку');
}, 100)); // Не чаще чем раз в 100мс

// Антипаттерн: бесконечная рекурсия микрозадач
function опасныйРекурсивныйКод() {
  Promise.resolve().then(() => {
    console.log("Ещё одна микрозадача");
    опасныйРекурсивныйКод(); // Создает ещё микрозадачи!
  });
}
 
опасныйРекурсивныйКод(); // Страница зависнет

// Монитор длинных задач
const наблюдатель = new PerformanceObserver((список) => {
  список.getEntries().forEach((запись) => {
    console.warn(`Обнаружена длинная задача продолжительностью ${запись.duration}мс`);
  });
});
 
наблюдатель.observe({entryTypes: ['longtask']});

// Измерение задержки первого ввода
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('FID:', entry.processingStart - entry.startTime);
  }
}).observe({type: 'first-input', buffered: true});