Self-Invoking функции в Javascript

в 7:58, , рубрики: javascript, метки:

В этой статье мы обсудим self-executing (они же — self-invoking) функции в JavaScript, и познакомимся с их возможностями на реальных примерах. Мы также узнаем, когда использование функции setInterval — это плохо и как можно этого избежать.
Статья является переводом — оригинал.

Анонимные self-Invoking функции

Анонимные self-invoking функции запускаются сразу же после их объявления, и не имеют имени, отсюда они и называются анонимными. Вот формат анонимных self-executing функций:

(function(){
 // ваш код…
})();

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

doStuff(); // запустится немедленно

и

doStuff; // не запустится немедленно,  может использоваться как callback

Анонимные self-executing функции запускаются немедленно, потому что в конце их объявления находятся ().
Если вы посмотрите на исходный код JQuery, то увидите, что все обрамлено скобками:

(function( window, undefined ) {
 // код jQuery 
})(window);

Это пример того, как может также выглядеть анонимная self-executing функция с аргументами.
Заметьте, что вы также можете объявлять анонимные self-executing функции так образом:

function(){
 // ваш код…
}();

Использование дополнительных скобок, как в примере до этого, является просто общепринятым стилем кодирования и используется такой известной библиотекой, как JQuery, а также рекомендуется Дугласом Крокфордом.
Если вы сбиты с толку дополнительной парой скобок — вот еще один простой пример нотации:

! function(){
// ваш код…
}();

Заметьте, что добавление знака восклицания перед ключевым словом function — это, по существу, идентично объявлению функции, как и в предыдущем примере, и также рекомендуется (например — использует Twitter). Выдержка из документации, параграф 12.4:

Выражение не может начинаться с ключевого слова function, потому как это может привести к двусмысленности с объявлением функции.

Self-Executing Function

Self-Executing функциями называют функции, которые запускаются немедленно. Пример:

function foo(){
 // ваш код…
}()

Заметьте, что теперь мы задали имя для нашей функции — foo, так что это не анонимная функция, хотя это по-прежнему self-executing функция, потому что содержит () в конце.

Как self-Executing функции выполняются автоматически?

Это лучше всего объяснить на примере. Давайте предположим, что на вашей страничке есть следующий javascript код:

function showUp(){
 alert(’Hello There’);
}

Когда вы заходите на эту страницу функция showUp не выполнится, пока вы ее не вызовите:

function showUp(){
 alert(’Hello There’);
}
// запуск функции
showUp();

Тема не менее, вы можете сделать так, чтобы функция запускалась автоматически при заходе на страницу — сделав ее self-executing:

function showUp(){
alert(’Hello There’);
}()
Где использовать self-executing функции?

Одна очевидная ситуация, когда вы хотите, чтобы функция выполнялась автоматически — при загрузке страницы, как показано в предыдущем примере, однако это тривиальная задача. Если вам необходимо выполнять кусок кода в цикле, например обновление чего-либо в базе данных, основываясь на взаимодействии с пользователем, или вы хотите загружать новости через аякс, как на домашней странице фейсбука, или какие-либо другие похожие ситуации, в этом случае будет удобно воспользоваться функцией setInterval, например:

setInterval(doStuff, 10000);

Вышеупомянутая функция doStuff будет вызываться каждые 10 секунд. Это нормальная практика для большинства разработчиков. Однако здесь кроется большая проблема. setInterval будет вызывать функцию doStuff точно каждые 10 секунд опять и опять, независимо от того, закончила ли она свое выполнение или нет. Это плохо, и рано или поздно может привести к неожиданным результатам.
Это яркий пример того, когда использование setInterval необходимо избегать. И в этом, как никто другой, нам поможет self-executing функция:

! function foo(){
 // ваш код
setTimeout(foo, 10000);
}();

Этот код также будет выполняться опять и опять лишь с одним отличием. setTimeout никогда не запустится, пока функция doStuff не закончит выполняться. Гораздо лучше, нежели использование setInterval в этой ситуации.

Автор: svyatPlehanov

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js