# Планирование вызова функции: setTimeout

[![Generic badge](https://img.shields.io/badge/JavaScript-%D0%B4%D0%BB%D1%8F%20%D1%82%D1%83%D0%BF%D1%8B%D1%85-green.svg)](https://img.shields.io/badge/JavaScript-%D0%B4%D0%BB%D1%8F%20%D1%82%D1%83%D0%BF%D1%8B%D1%85-green.svg)

![](/files/-M8WOkHJaY4olsBOWxoj)

Представь, у тебя есть задача вывести приветственное сообщение пользователю через `5 секунд` после того, как он перешел на страницу. Как это организовать средствами **JavaScript**?

В этом вопросе нам поможет метод объекта `window` – `setTimeout()`. Данный метод запускает через указанное в аргументах время, указанную в аргументах функцию. Пример использования:

```javascript
// 1-й вариант использования
window.setTimeout(func, delay);

// 2-й вариант использования
setTimeout(func, delay);
```

Как видишь, данный метод объекта `window` можно вызывать и как обычную функцию (*2-й вариант использования*). Я, кстати, рекомендую использовать именно **2-й вариант**, так как он чаще всего встречается и используется.

В качестве аргументов мы передаем `func` и `delay`, где `func`– это функция, либо ссылка на функцию, которую должен запустить `setTimeout` после того, как пройдет время `delay` (указывается в миллисекундах). **Кстати, такие функции, которые передаются в другие функции в качестве аргументов – называются callback-функциями или функциями обратного вызова.**

Теперь вернемся к нашей задаче поставленной в начале урока и поприветствуем нашего пользователя:

```javascript
function hello() {
   alert('Привет!');
}

setTimeout(hello, 5000);
```

Функция `hello`, в данном примере, является **callback-функцией**, которую нужно запустить после того как пройдет `5000 миллисекунд` (*5 сек*). В данном примере, в качестве первого аргумента, мы передали ссылку на функцию `hello`. Ссылка на функцию – **это ее имя, а не вызов.** Т.е.:

```javascript
hello; // - это ссылка на функцию
hello(); // - это вызов функции
```

**В качестве аргумента мы должны передавать либо ссылку на функцию, либо описание функции (смотри ниже), но никогда не должны передавать вызов функции!**

Есть и другие варианты передачи **callback-функции**, которые делают ровно тоже самое.

В качестве первого аргумента, мы можем передать **анонимную** (*безымянную*) **функцию**:

```javascript
setTimeout(function() { alert('Привет!'); }, 5000);
```

Так же можем передать **анонимную стрелочную функцию**:

```javascript
setTimeout(() => alert('Привет!'), 5000);
```

**Небольшое отступление**: использование **анонимных функций** позволяет не описывать **callback-функцию** в глобальной области видимости, т.е. **анонимная функция**, описание которой ты передашь в качестве первого аргумента будет доступна только для `setTimeout`, и не доступна ни для кого извне, что, иногда, является лучшим решением.

Продолжим.

Самое интересное, что мы можем передать строку, вместо функции и она выполнится:

```javascript
setTimeout(`alert('Привет!')`, 5000);
```

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

```javascript
setTimeout(`alert('Привет!')`, 5000);
```

Стоит запомнить, что такой вариант может встретиться в чужом коде, но **в своём такой писать не стоит**.

Последнее что хотелось бы отметить, так это то, что метод `setTimeout` нужно **удалять**, чтобы не произошло **утечки памяти**. Делается это достаточно просто. 

`setTimeout` на самом деле еще и возвращает данные, а именно, он возвращает свой `идентификатор`. Стоит понимать, что у каждого `setTimeout` этот `идентификатор` **индивидуальный, свой.** Чтобы не произошло утечки памяти, нужно удалять `setTimeout` после выполнения. Сделать этом можно с помощью `clearTimeout(id)`, где в качестве аргумента нужно передать `идентификатор` вашего `setTimeout`.

Для начала давай сохраним `идентификатор` нашего `setTimeout` в константе `timerId`:

```javascript
function hello() {
   alert('Привет');
}

const timerId = setTimeout(hello, 5000); 
```

Удалить `setTimeout` из памяти нам нужно после выполнения приветствия, поэтому добавим `clearInterval` в функцию `hello`, после вывода приветствия:

```javascript
function hello() {
   alert('Привет');
   clearInterval(timerId);
}

const timerId = setTimeout(hello, 5000); 
```

Всё, теперь после выполнения приветствия `setTimeout` будет удален из памяти.

Еще один небольшой пример:

```javascript
function hello() {
   alert('Привет');
}

const timerId = setTimeout(hello, 5000);
clearInterval(timerId);
```

В данном случае `setTimeout` не будет выполнен совсем, потому что мы вызвали `cleatInterval` сразу же после объявления `setTimeout`, данным действием мы как бы **отменили (удалили)**`setTimeout`.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://thedvlpr.gitbook.io/javascript-for-dummies/planirovanie-vyzova-funkcii-settimeout.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.