aboutsummaryrefslogtreecommitdiff
path: root/files/ru/glossary/callback_function/index.html
blob: b490cf663f353ea42c8dac5770dc1f0c603eac5e (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
---
title: Функция обратного вызова
slug: Glossary/Callback_function
tags:
  - Callback
  - Функция обратного вызова
translation_of: Glossary/Callback_function
original_slug: Словарь/функция_обратного_вызова
---
<p>Функция обратного вызова - это функция, переданная в другую функцию в качестве аргумента, которая затем вызывается по завершению какого-либо действия.</p>

<p>Вот краткий пример:</p>

<pre class="brush: js">function greeting(name) {
  alert('Hello ' + name);
}

function processUserInput(callback) {
  var name = prompt('Please enter your name.');
  callback(name);
}

processUserInput(greeting);</pre>

<p>Выше приведен пример <a href="/en-US/docs/Glossary/Synchronous">синхронного</a> обратного вызова, поскольку функция <code>processUserInput</code> выполняется синхронно.</p>

<p>Функции обратного вызова часто используются для продолжения выполнения кода после завершения <a href="/ru/docs/%D0%A1%D0%BB%D0%BE%D0%B2%D0%B0%D1%80%D1%8C/Asynchronous">асинхронной</a> операции - они называются асинхронными обратными вызовами.</p>

<pre class="brush: js">async function pageLoader(callback) {
  const data = await fetch('/ru/docs/Словарь/функция_обратного_вызова')
  callback(data)
}

function onPageLoadingFinished(pageData) {
  console.log('Page was sucessfully loaded!')
  console.log('Response:')
  console.log(pageData)
}

pageLoader(onPageLoadingFinished)
</pre>

<p>Вот еще один пример асинхронного обратного вызова: <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/maps-example.html">maps-example.html</a> (<a href="http://mdn.github.io/learning-area/javascript/apis/introduction/maps-example.html">живой пример</a>). Он использует Google Maps API и Geolocation API для отображения карты текущего местоположения вашего устройства.</p>

<pre class="brush: js">// maps-example.html
// Вызов асинхронной функции getCurrentPosition
// с передачей callback функции принимающей координаты
// в качестве параметра
navigator.geolocation.getCurrentPosition(function(position) {
  var latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
  var myOptions = {
    zoom: 8,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.TERRAIN,
    disableDefaultUI: true
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
});
</pre>

<p>Поскольку получение координат устройства из его GPS является асинхронным (мы точно не знаем, когда данные будут возвращены), метод <code>Geolocation.getCurrentPosition()</code> принимает анонимную функцию обратного вызова в качестве параметра, которая получает найденные данные координат. Эта функция выполняется только по возвращению данных координат.</p>

<h2 id="Больше_информации"><strong>Больше информации</strong></h2>

<h3 id="Основное"><strong>Основное</strong></h3>

<ul>
 <li><a href="https://en.wikipedia.org/wiki/Callback_(computer_programming)">Сallback на Wikipedia</a></li>
 <li><a href="https://learn.javascript.ru/custom-events">Колбэки и события на компонентах</a></li>
 <li><a href="http://callbackhell.ru/">Ад обратных вызовов</a></li>
</ul>