Может ли события DOM запускаться до запуска моего скрипта?

Question

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

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

Согласно this answer, пользователей может быть в состоянии взаимодействовать с видеоплеером до загрузки сценария. Но мне нужно убедиться, что мой обработчик событий прикреплен до того, как событие 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> 

Однако, спецификация была изменена, чтобы решить эту проблему. Теперь браузеры должны queue firing of events until next event loop run, вместо того, чтобы немедленно их запустить.

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

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

---

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

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

   <video onplay="…"> 
   

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

Answer 2

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

модернизатор первый.