JavaScript Settimeout Tutorial – Как использовать эквивалент JS, ждать, задержать и пауза

Автор оригинала: FreeCodeCamp Community Member.

JavaScript – это язык полотна. И это не было то же самое, так как ES5 был освобожден. Все больше и больше идей и функций погружаются с разных языков и интегрированы в JavaScript.

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

Но одна из вещей, которые JavaScript Miss – это способ «приостановить» выполнение некоторое время и возобновить его позже. В этом посте я обсудим, как вы можете добиться этого и то, что он действительно означает «пауза» или «сон» в JavaScript.

Спойлер: JavaScript никогда не «паузы».

TL; доктор

Вот код копирования-макарон, который делает работу:

/**
 * 
 * @param duration Enter duration in seconds
 */
function sleep(duration) {
	return new Promise(resolve => {
		setTimeout(() => {
			resolve()
		}, duration * 1000)
	})
}

Но что здесь действительно происходит?

Сетряки и поддельные обещания

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

async function performBatchActions() {
	// perform an API call
	await performAPIRequest()

	// sleep for 5 seconds
	await sleep(5)

	// perform an API call again
	await performAPIRequest()
}

Эта функция Производственные функции , когда вызывается, просто выполняет Perwayapirequest Функция, ждет около 5 секунд , а затем снова называет ту же функцию. Обратите внимание, как я написал около 5 секунд , а не 5 секунд.

Сильная записка, чтобы потушить туда: вышеуказанный код не гарантирует идеального сна. Это означает, что если вы укажете продолжительность быть, скажем, 1 секунду, JavaScript не гарантирует Что он начнет запустить код после сна ровно через 1 секунду.

Почему нет? Вы можете спросить. К сожалению, это потому, что таймеры работают в JavaScript, и в целом, петли событий. Однако JavaScript абсолютно гарантирует, что кусок кода после сна никогда не будет выполняться до указанное время.

Таким образом, у нас на самом деле нет полной неопределенной ситуации, просто частичной. И в большинстве случаев это только в пределах нескольких миллисекунднов.

JavaScript один резьбовый

Одно нить означает, что процесс JavaScript не может совсем выходить с дороги вообще. Он должен делать все вещи – от слушателей событий, к HTTP обратных вызовов, на том же основном потоке. И когда одна вещь выполняется, другой не может выполнить.

Рассмотрим веб-страницу, в которой у вас есть несколько кнопок, и вы запускаете код выше, чтобы имитировать сон, скажем, 10 секунд. Что вы ожидаете, произойдет?

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

Итак, как JavaScript на самом деле паузует одну нить, даже не приостановив его?

Познакомьтесь с циклом событий

В отличие от других языков, JavaScript не просто продолжает выполнять код в линейной форме сверху вниз. Это асинхронный язык, управляемый событием с тоннами магии в виде контура события.

Контур событий разбивает ваш код в синхронных и определенных событиях – как таймеры и HTTP-запросы. Точно говоря, есть две очереди – очередь задач и очередь микрозазки.

Всякий раз, когда вы запускаете JS, и есть асинхронная вещь (например, мероприятие Mouseclick, или обещание), JavaScript бросает его в очередь задач (или в очередь MicroTask) и продолжает выполнять. Когда он завершает «одноместное галочку», он проверяет, есть ли очередь задач и очередь MicroTask для него. Если да, то он выполнит обратный вызов/выполнить действие.

Я бы действительно рекомендовал кого-либо заинтересован в подробных работах петлей событий, чтобы посмотреть это видео:

Заключение

Вы пришли сюда для простых инструкций сна в JavaScript и в итоге узнали о одной из основных вещей в JavaScript – Coops Event! Удивительно, не так ли?

Ну, если вам понравилась статья, оформить заказ Codedamn – Платформа, которую я строил для разработчиков и учащихся, как вы. Также, давайте подключимся к социальным сетям – Twitter и Instagram Отказ До скорой встречи!

Мир