события DOM могут срабатывать до того, как мой скрипт будет выполнен?

Question

У меня есть элемент video и скрипт, который присоединяет обработчик onplay к видео через jQuery:

<video id="vid" />
<!-- ... -->
<script type="text/javascript">
    $('#vid').on('play', function () {
        $(this).addClass('playing');
    });
</script>

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

Чтобы проверить это, я добавил скрипт сразу после video, который вызывает play(). Обработчик запускается во всех основных браузерах, кроме WebKit, который вообще не воспроизводит видео. Даже оборачивая оператор jQuery в функцию $().ready(), можно по-прежнему подключать обработчик до onplay.

Гарантируется ли, что мой сценарий никогда не пропустит никаких событий из видео в HTML5? Относится ли это ко всем событиям DOM? Что если я добавлю async в скрипт?

Answer 1

Условие гонки в этом случае было возможно:

<video autoplay src="…"></video>
<script>alert("wait!")</script>
<script>$('video').on('play',…)</script>

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

Если сценарий, подключающий обработчики событий, является встроенным сценарием, следующим сразу за <video>, с запуском без ожидания для DOMReady, условие состязания в совместимых браузерах не будет. 1013 *

Если вы используете внешний или асинхронный сценарий, ждете DOMReady, используете setTimeout или синхронный XHR, тогда вы можете пропустить эти события, поскольку эти вещи могут вызвать обработку цикла событий (хотя я не уверен на 100%, остановка сети позволяет браузерам обрабатывать цикл событий).

---

Я не знаю, был ли обновлен WebKit для поддержки более безопасного поведения. Если у вас все еще есть проблемы, вы можете использовать методы, которые работают, даже если события запускаются мгновенно:

1. Использовать встроенный обработчик событий:

   <video onplay="…">
   

2. Создать элемент программно (document.createElement('video')) с прикрепленными обработчиками до его вставки в документ.

Answer 2

Лучший способ убедиться, что это использовать RequireJS и убедиться, что вы вкладываете в правильном порядке, если это необходимо, или использовать orderPlugin для RequireJS.

модернизатор в первую очередь.