По тегу async = "async" в javascript иногда мои JS-файлы имеют значение "undefined is not function" Почему?Как заставить некоторых, как последовательность между ними?

Question

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

<script  src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" ></script>
<script  src="../js/jq/jquery.ui.core.js" ></script>
<script  src="../js/jq/jquery.ui.widget.js" ></script>
<script  src="../js/jq/jquery.ui.mouse.js" ></script>
<script  src="../js/jq/jquery.ui.mouse1.js" ></script>
<script  src="../js/jq/jquery.ui.mouse2.js" ></script>
<script  src="../js/MyLoader.js" ></script>

но когда я изменяю его в следующий код и добавляю async = "async" в скрипт.

<script  src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" async="async"></script>
<script  src="../js/jq/jquery.ui.core.js" async="async"></script>
<script  src="../js/jq/jquery.ui.widget.js" async="async"></script>
<script  src="../js/jq/jquery.ui.mouse.js" async="async"></script>
<script  src="../js/jq/jquery.ui.mouse1.js" async="async"></script>
<script  src="../js/jq/jquery.ui.mouse2.js" async="async"></script>
<script  src="../js/MyLoader.js" async="async"></script>

Это странное поведение, иногда все javascript-файлы загружаются, иногда некоторые javascript-файлы отсутствуют.

Я проверяю это в Chrome. Согласно документации, он должен быть загружен, но не асинхронно или плохо загружен ?? Самым важным для меня является принудительная загрузка MyLoader.js в качестве последнего javascript, после чего он может использовать ресурсы из другой библиотеки. Так что вопрос в том, как отложить один файл JS для загрузки в качестве последнего файла JavaScript ??

пример erorr в браузере

query.ui.mouse.js:20Uncaught TypeError: Object function (a,b){return new e.fn.init(a,b,h)} has no method 'widget'
jquery.ui.widget.js:67Uncaught TypeError: undefined is not a function
jquery.ui.widget.js:67Uncaught TypeError: undefined is not a function
loader.js:6Uncaught TypeError: Object [object Object] has no method 'draggable'
2event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed from the engine in the near future.

Answer 1

Если основная проблема, которую вы пытаетесь решить, состоит в том, чтобы убедиться, что MyLoader.js загружен последним, а все остальное загружено до него, то просто удалите атрибут async из всех ваших тегов сценария.Затем браузер загрузит и выполнит их в порядке, встречающемся в файле.

---

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

Например, все файлы jQuery.ui зависят от jquery.min.js, поэтому он ДОЛЖЕН быть загружен первым.Когда вы загружаете вещи асинхронно, их порядок больше не гарантируется, поэтому вы бросаете кубики на предмет того, будут ли они загружены в правильном порядке или нет.

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

См. в этой статье для хорошего обсуждения темы.

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

Answer 2

Вы должны использовать defer для сценариев, которые имеют зависимость.defer - это то же самое, что и async, за исключением того, что он поддерживает порядок исполнения.Больше информации здесь: http://www.webkit.org/blog/1395/running-scripts-in-webkit/

Answer 3

Это должно быть довольно просто исправить, просто объедините все файлы jquery js в основной файл и затем загрузите его (это также экономит на URL-запросах и ускоряет загрузку страницы)

ИЛИ

Проверьте, определены ли функции в jquery перед их выполнением

typeof func!=="undefined"

Answer 4

Ваш вопрос сейчас звучит так: как я могу загружать скрипты по порядку асинхронно? :) Реальный ответ заключается в том, что вам не нужно async там. Новые браузеры загружают сценарии параллельно и выполняют их в порядке

Answer 5

Асинхронный тег означает, что будет загружаться асинхронно.

Так что, если jquery.min.js все еще загружается, когда его зависимости начинают загружаться, скрипт не будет работать.

Если вы хотите загрузить асинхронно, попробуйте поработать с паттерном AMD, лично рекомендую RequireJS