Как без ошибок асинхронно загружать js?

Question

[Алексей]

Всем привет! Вначале страницы у меня асинхронно загружается jquery
А ниже на странице есть такой код:

$("#vote").on('click', function(){
.............
})

Но он не работает.
Как сделать, чтобы и jquery продолжал загружаться асинхронно и код работал?

Вот пример: https://jsfiddle.net/2ofm8r7a/
Причем уберите слово async - и все сразу работает

Comments

[Алексей]

Максим Зайцев: picone.ru/images/23-yhdrdyhb.jpg

Answer 1

[timfcsm]

1.поменяйте async на defer
2. вынесите код в отдельный файл
3. подключите этот файл после файла jquery и так же установите ему defer

<script src="jquery.js" defer></script>
// здесь может быть какой-то другой код...
<script src="my-script.js" defer></script>

Comments

[Алексей]

Раз на раз не приходится... Выбает работает, бывает нет (jquery иногда быстрее загружается, иногда медленней)

[timfcsm]

Евгений: defer сохраняет порядок загрузки, как скрипты прописаны в коде... значит в чём-то другом проблема.. если вы подключаете их не в конце всего html, оберните свой код в $(document).ready(function(){})

[Алексей]

Тимур: Не знаю из-за этого ли проблема, но установил всем другим скриптам defer и теперь вроде все нормально.
Подскажите еще плз, defer - это разновидность асинхронной загрузки?

[timfcsm]

Евгений: так у вас там и другие скрипты, что ж вы молчите то:D им скорее всего тоже jquery нужен был...
да, defer это тот-же async , только ставит в скрипты в очередь на выполнение в том порядке, в котором они прописаны в коде. плюс они выполняются только после того, как браузер обработает html.
async же начинает выполнять скрипт сразу, как файл загрузился