JavaScript setTimeout

Краткое описание: в этом уроке вы узнаете, как использовать JavaScript setTimeout(), который устанавливает таймер и выполняет функцию обратного вызова после истечения таймера.

Введение в JavaScript setTimeout()

setTimeout() — это метод объекта window. setTimeout() устанавливает таймер и выполняет функцию обратного вызова после истечения таймера.

Ниже показан синтаксис setTimeout():

let timeoutID  = setTimeout(cb [,delay], arg1, arg2,...);
Code language: JavaScript (javascript)

В этом синтаксисе:

•  cb — это функция обратного вызова, которая будет выполнена после истечения таймера.
• delay — это время в миллисекундах, которое таймер должен подождать перед выполнением функции обратного вызова. Если вы опустите это значение, delay по умолчанию будет равно 0.
• arg1, arg2, … — это аргументы, передаваемые функции обратного вызова cb.

Функция setTimeout() возвращает timeoutID, которое является положительным целым числом, идентифицирующим таймер, созданный в результате вызова метода.

timeoutID можно использовать для отмены таймаута, передав его в метод clearTimeout().

Пример JavaScript setTimeout()

Ниже создаются две простые кнопки и подключаются к методам setTimeout() и clearTimeout().

Когда вы нажимаете на кнопку Show, вызывается showAlert() и показывает диалог предупреждения через 3 секунды. Чтобы отменить таймаут, вы нажимаете кнопку Cancel.

HTML

<p>JavaScript setTimeout Demo</p>
<button onclick="showAlert();">Show</button>
<button onclick="cancelAlert();">Cancel</button>
Code language: HTML, XML (xml)

JavaScript

var timeoutID;

function showAlert() {
    timeoutID = setTimeout(alert, 3000, 'setTimeout Demo!');
}

function clearAlert() {
    clearTimeout(timeoutID);
}
Code language: JavaScript (javascript)

Вывод

Как работает JavaScript setTimeout()

JavaScript является однопоточным, поэтому он может выполнять только одну задачу за один раз. Это означает, что в данный момент времени он может выполнять только одну задачу. Кроме движка JavaScript, в веб-браузере есть и другие компоненты, такие как Event Loop, Call Stack и Web API.

Когда вы вызываете setTimeout(), движок JavaScript создает новый контекст выполнения функции и помещает его в стек вызовов.

Функция setTimeout() выполняется и создает таймер в компоненте Web APIs веб-браузера. Когда таймер истекает, функция обратного вызова, переданная в setTimeout(), помещается в очередь обратных вызовов.

Цикл событий следит как за стеком вызовов, так и за очередью обратных вызовов. Он удаляет функцию обратного вызова из очереди обратных вызовов и помещает ее в стек вызовов, когда стек вызовов пуст.

Как только функция обратного вызова оказывается в стеке вызовов, она выполняется.

См. следующий пример:

function task() {
    console.log('setTimeout Demo!')
}

setTimeout(task, 3000);
Code language: JavaScript (javascript)

В этом примере:

Сначала setTimeout() помещается в стек вызовов. Это создает таймер на Web API.

Во-вторых, примерно через 3 секунды таймер истекает, task помещается в очередь обратных вызовов и ждет следующей возможности для выполнения.

В-третьих, поскольку стек вызовов пуст, цикл событий удаляет task() из очереди обратных вызовов, помещает его в стек вызовов и выполняет его:

В-четвертых, выполняется console.log() в setTimeout(), который создает новый контекст выполнения функции.

Наконец, console.log() и task() выгружаются из стека вызовов после их завершения.

Резюме

• setTimeout() — это метод объекта окна.
• setTimeout() устанавливает таймер и выполняет функцию обратного вызова, когда таймер истекает.