Расскажи про event loop

Подготовка к собеседованию на Frontend Developer

  • Цикл событий (Event Loop) — это важный механизм асинхронного программирования, который позволяет выполнять JavaScript-код в одном потоке, не задерживая другие операции. Это достигается за счет постоянного мониторинга наличия задач для выполнения и их последовательного запуска.

    JavaScript работает в однопоточном режиме, что означает, что одновременно может выполняться только одна операция. Однако, благодаря циклу событий, JavaScript способен эффективно обрабатывать асинхронные задачи, такие как сетевые запросы, таймеры или события пользовательского интерфейса, не приостанавливаясь для их ожидания.

    Алгоритм работы Event Loop выглядит следующим образом:

    1. Call Stack (Стек вызовов): содержит текущие выполняемые функции. При вызове функции она добавляется в стек, а по завершении — удаляется.

    2. Callback Queue (Очередь обратных вызовов): по завершении асинхронной операции её callback-функция помещается в эту очередь.

    3. Event Loop: постоянно проверяет стек вызовов на наличие задач. Если стек пуст, Event Loop берет первую функцию из очереди обратных вызовов и передает её в стек для выполнения.

    Этот процесс позволяет JavaScript управлять длительными операциями, такими как загрузка данных, не блокируя основной поток, сохраняя тем самым отзывчивость приложения.

    Пример кода:

    console.log('Первое сообщение');
    
    setTimeout(() => {
    
        console.log('Сообщение из setTimeout');
    
    }, 0);
    
    console.log('Второе сообщение');

    Результат в консоли:

    Первое сообщение
    
    Второе сообщение
    
    Сообщение из setTimeout

    Хотя задержка в setTimeout составляет 0 миллисекунд, его callback выполнится только после завершения текущих операций в стеке вызовов, что иллюстрирует работу очереди обратных вызовов.

    Цикл событий делает возможной асинхронную обработку операций, сохраняя отзывчивость и эффективность JavaScript-приложений.

    Роман Ермилов | Источник | 4 дня назад

Ваш ответ на вопрос

Помогите другим участникам подготовиться к собеседованию и пришлите ответ на вопрос, пожалуйста укажите источник вашего ответа

Пожалуйста зарегистрируйтесь для отправки ответа. Это просто :)

Подпишись на наш телеграм канал, это поможет нам в продвижении сервиса @hireguru

17 видео Подборка видео из публичных собеседований с таймкодом, где задавали этот или похожий на него вопро

  • Публичное собеседование: Frontend-разработчик [Хекслет]Тайм-код: #1427 |Открыть видеоПубличное собеседование: Frontend-разработчик [Хекслет]
  • Публичное собеседование на английском языке: junior-frontend [Хекслет]Открыть видеоПубличное собеседование на английском языке: junior-frontend [Хекслет]
  • Cобеседование Junior Frontend разработчика: сразу после учебных курсов! Вёрстка, JS, event loopТайм-код: #2570 |Открыть видеоCобеседование Junior Frontend разработчика: сразу после учебных курсов! Вёрстка, JS, event loop
  • Собеседование на JavaScript разработчика | Junior Frontend разработчикТайм-код: #1462 |Открыть видеоСобеседование на JavaScript разработчика | Junior Frontend разработчик
  • Middle за 1 год? Собеседование #3 frontend разработчикаТайм-код: #224 |Открыть видеоMiddle за 1 год? Собеседование #3 frontend разработчика
  • Талант в 18 лет? Собеседование #2 frontend разработчикаТайм-код: #607 |Открыть видеоТалант в 18 лет? Собеседование #2 frontend разработчика
  • Крушитель алгоритмов? Собеседование frontend разработчика#4Тайм-код: #566 |Открыть видеоКрушитель алгоритмов? Собеседование frontend разработчика#4
  • СОБЕСЕДОВАНИЕ Middle FRONTEND разработчика | JavaScript REACT TYPESCRIPTТайм-код: #171 |Открыть видеоСОБЕСЕДОВАНИЕ Middle FRONTEND разработчика | JavaScript REACT TYPESCRIPT
  • СОБЕСЕДОВАНИЕ JUNIOR FRONTEND РАЗРАБОТЧИКА | FRONTEND | REACTТайм-код: #2056 |Открыть видеоСОБЕСЕДОВАНИЕ JUNIOR FRONTEND РАЗРАБОТЧИКА | FRONTEND | REACT
  • ИНТЕРЕСНОЕ СОБЕСЕДОВАНИЕ JUNIOR Frontend разработчикаТайм-код: #323 |Открыть видеоИНТЕРЕСНОЕ СОБЕСЕДОВАНИЕ JUNIOR Frontend разработчика
  • FRONTEND СОБЕСЕДОВАНИЕ С БЫВШИМ РУКОВОДИТЕЛЕМ | REACT | TYPESCRIPTТайм-код: #1040 |Открыть видеоFRONTEND СОБЕСЕДОВАНИЕ С БЫВШИМ РУКОВОДИТЕЛЕМ | REACT | TYPESCRIPT
  • 👨‍💻 Собеседование frontend junior+ разработчика (CSS, HTML, JS, React, Typescript, Redux)Тайм-код: #3329 |Открыть видео👨‍💻 Собеседование frontend junior+ разработчика (CSS, HTML, JS, React, Typescript, Redux)
  • 👨‍💻 Собеседование frontend junior+ разработчика (CSS, HTML, JS, React, Typescript, Redux)Тайм-код: #2275 |Открыть видео👨‍💻 Собеседование frontend junior+ разработчика (CSS, HTML, JS, React, Typescript, Redux)
  • #14 Собеседование Senior Frontend разработчика из FAANGТайм-код: #43 |Открыть видео#14 Собеседование Senior Frontend разработчика из FAANG
  • #4 Настоящий мидл? Собеседование на Frontend Middle разработчикаТайм-код: #1151 |Открыть видео#4 Настоящий мидл? Собеседование на Frontend Middle разработчика
  • #7 Первое собеседование Junior Frontend разработчицыТайм-код: #6919 |Открыть видео#7 Первое собеседование Junior Frontend разработчицы
  • FRONT-END РАЗРАБОТЧИК: Как пройти СОБЕСЕДОВАНИЕ?Тайм-код: #1060 |Открыть видеоFRONT-END РАЗРАБОТЧИК: Как пройти СОБЕСЕДОВАНИЕ?