Зачем вам асинхронно? Почему? Давайте посмотрим на кусок кода.
Вопрос 1:
for (var i = 0; i <100000; i ++) {} alert ('Hello World !!!);Этот код означает выполнение 100 раз перед выполнением оповещения. Проблема, которую это вызывает, заключается в том, что она серьезно блокирует выполнение последующего кода. Что касается почему, это в основном потому, что JS однопоточный.
Вопрос 2:
Обычно нам нужно решить эту проблему. Если нам нужно добавить код скрипта в голову, мы обычно пишут код в window.onload (если управляется DOM). Вы когда -нибудь задумывались о том, зачем нам добавить window.onload ? Причина в том, что когда вы работаете в DOM, браузер HTML -кода, стоящий за скриптом, не начал загружаться, но вы думаете о том, чтобы жениться на ней до ее рождения. Это возможно? Конечно, это невозможно, добавьте окно. Причина, по которой onload может быть связан с тем, что код в window.onload выполняется после того, как документ полностью загружен, что эквивалентно асинхронному.
Вопрос 3:
Иногда странице не нужно загружать весь код одновременно, но чаще мы загружаем только определенный кусок кода в соответствии с определенным требованием.
Что такое отдельный поток?
Таким образом, вы можете понять, что один поток - это выполнение сегментов кода, сначала выполнение предыдущего, а затем выполнение следующего после завершения предыдущего.
Итак, какой JS асинхронно?
Я считаю, что эта вещь почти плохо используется. Это SetTimeout/SetInterval и, конечно, Ajax. Я считаю, что все знают Аякс Асинхронный. Конечно, это также может быть синхронным, но никто не делает этого так. Тем не менее, некоторые друзья могут не знать по -другому о Settimeout и SetInterval, будучи асинхронным. Давайте поговорим о том, почему SetTimeout асинхронно.
setTimeout (function () {console.log (0);}, 0) console.log (1); // 1 // 0 После запуска этого кода первые отпечатки 1 вместо 0. начинают сбиваться с толку некоторых друзей? Хотя мы установили Settimeout для выполнения console.log(0) через 0 секунд, Settimeout очень особенный, потому что он асинхронно. Давайте отбросим, почему печать 1, а затем 0. Давайте поговорим о том, что является асинхронным.
Что такое асинхронное?
Например, в некоторых ресторанах вам нужно заранее сделать бронирование, и вы можете пойти только тогда, когда другие заканчивают еду. Поэтому, когда другие едят, вы можете делать другие вещи. Когда другие заканчивают еду, кто -то уведомит вас, так что вы можете пойти. Для кода, такого как Ajax, вы определяете метод обратного вызова. Этот метод обратного вызова не будет выполнен в то время, но будет ждать завершения ответа сервера до выполнения этого кода.
Давайте вернемся к предыдущему разделу SetTimeout. Это работает так. С того момента, как вы определяете SetTimeout (независимо от того, будет ли время 0 или нет), JS не будет напрямую выполнять этот код, но бросит его в очередь событий. Только после того, как все задачи синхронизации на странице выполняются, будет выполнен код в очереди событий. Что такое синхронизация? Помимо асинхронного кода, это синхронизация -_-.
Как внедрить асинхронный JS?
1. Используйте SetTimout для достижения асинхронного
setTimeout (function () {console.log (document.getElementbytagname ('body') [0]);}, 0)Но есть небольшая проблема с SetTimeout, которая является тем, что время неточно. Если вы хотите быстрее выполнить этот код, мы можем использовать функцию, предоставленную HTML5.
requestAnimationFrame (function () {console.log (document.getElementbytagname ('body') [0]);})Разница между requestAnimationFrame и SetTimeout заключается в том, что requestAnimationFrame выполняется быстрее, чем SetTimeout , поэтому многие люди используют requestAnimationFrame для создания анимации.
2. Динамически создавать теги скрипта
var head = document.getElementbytagname ('head') [0]; var script = document.createElement ('script'); script.src = 'mengzhuzi.js'; head.appendchild ('script');3. Используйте DEFER/ASYNC, предоставленное сценарием
<script src = "xx.js" defer> </script>
Определение: этот код выполняется только после загрузки страницы.
<script src = "xx.js" async> </script>
Async: выполнить код сценария асинхронно
Однако асинхронно также является недостатком, например, следующий код:
Нормальный код:
Try {Throut New Error ('Hello World');} catch (err) {console.log (err);} // error: hello world (…)Асинхронный код:
try {settimout (function () {throw new error ('hello world');}, 0)} catch (err) {console.log (err);} // referenceerror: settimout не определено (…)Можно обнаружить, что код в подъеме не выполняется, что означает, что попытка не может захватить код в асинхронном.
Суммировать
Асинхронный в JS и как это достичь, в основном закончится. Это клише о JS Asynchronous, но я все еще надеюсь, что содержание этой статьи будет полезно для всех.