Как обработчики событий выполняются внутри в javascript? - PullRequest
Новая
       63

Как обработчики событий выполняются внутри в javascript?

0 голосов
/ 02 января 2019

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

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

Когда мыскажем, мы регистрируем событие, где мы его регистрируем?(очередь сообщений, очередь заданий)?Где он сохраняется в памяти и как браузер узнает, что произошло какое-то событие?

Связаны ли события, связанные с операционными системами?

Я смотрел видео philip roberts и я понял функциональность цикла событий.

Я хочу знать внутреннюю часть javascript.

Ответы [ 2 ]

0 голосов
/ 02 января 2019

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

  • Пользователь взаимодействовал с компонентом пользовательского интерфейса (нажатие кнопки, наведение курсора на что-то и т. Д.)
  • Запрос API возвращенответ
  • Запрос на доступ к ресурсу ОС выполнен

Например, это код Firefox для основного цикла событий: 

while (!mExiting)
    NS_ProcessNextEvent(thread);

Представьте себеу нас есть следующий фрагмент кода: 

function jsFunction() {
    console.log("prints first");
    // execute remote API call
    axios.get("url").then(reponse => {
        console.log("success");
    }).catch(error => {
        console.log("error");
    });
    console.log("prints second");
}

, и мы вызываем эту функцию: 

jsFunction();

Итак, что происходит здесь:

  • Выесли ваша однопотоковая управляющая линия, выполняющая эту функцию, печатает «печатает сначала».
  • Затем у вас есть этот внешний вызов API, поэтому браузеры отправляют его как запрос сетевому уровню вашей ОС для выполнения запроса httpи регистрирует эту функцию обратного вызова, которую мы предоставили для выполнения при получении ответа от сетевого уровня, и вместо того, чтобы ждать, пока это произойдет, он продолжает выполнение.
  • Продолжение выполнения это prints «печатает секунду».
  • Когда ответ приходит с сетевого уровня, цикл обработки событий выполняет функцию обратного вызова, которую вы предоставили.Этот ответ является событием, которое отправляется в цикл событий, описанный выше.Он выполняет подходящий обратный вызов и печатает «success» или «error» в соответствии с состоянием ответа.

См. Reference для более актуального объяснения того, как цикл событий реализован в браузерах.и браузерные движки в целом.

0 голосов
/ 02 января 2019

Когда мы говорим, что регистрируем событие, где мы его регистрируем?Где он сохраняется в памяти?

На ресурсе, который вы слушаете, установлена ​​функция обработчика.Для событий DOM это объекты DOM, которые браузеры используют для отображения документа, для обещаний - это объект JS, для таймеров есть внутренний объект таймера (связанный с DOM, поскольку таймеры определены в HTML и для каждого окна).

(очередь сообщений, очередь заданий)?

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

Как браузер узнает, что произошло какое-то событие?Связаны ли события, связанные с вызовом операционной системы?

Да, в конечном итоге события исходят от операционных систем, будь то поступающие сетевые пакеты, тайм-ауты или щелчки в окне браузера.(Изнутри самого механизма браузера запускается очень мало событий).Затем браузер проверяет, какие ресурсы затронуты системным событием (например, какой элемент DOM был нажат), а затем запускает соответствующее событие, чтобы при необходимости планировать любые обработчики.

...