"Я перезвоню позже!"
Обратный вызов — это функция, передаваемая в качестве аргумента другой функции.
Этот метод позволяет функции вызывать другую функцию.
Функция обратного вызова может запускаться после завершения другой функции.
Функции JavaScript выполняются в той последовательности, в которой они вызываются. Не в той последовательности, в которой они определены.
Этот пример в конечном итоге отобразит «До свидания»:
function myFirst() {
myDisplayer("Hello");
}
function
mySecond() {
myDisplayer("Goodbye");
}
myFirst();
mySecond();Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>Function Sequence</h2>
<p>JavaScript functions are executed in the sequence they are called.</p>
<p id="demo"></p>
<script>
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myFirst() {
myDisplayer("Hello");
}
function mySecond() {
myDisplayer("Goodbye");
}
myFirst();
mySecond();
</script>
</body>
</html>
В конечном итоге этот пример отобразит «Привет»:
function myFirst() {
myDisplayer("Hello");
}
function
mySecond() {
myDisplayer("Goodbye");
}
mySecond();
myFirst();Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>Function Sequence</h2>
<p>JavaScript functions are executed in the sequence they are called.</p>
<p id="demo"></p>
<script>
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myFirst() {
myDisplayer("Hello");
}
function mySecond() {
myDisplayer("Goodbye");
}
mySecond();
myFirst();
</script>
</body>
</html>
Иногда вам хочется иметь лучший контроль над тем, когда выполнять функцию.
Предположим, вы хотите выполнить расчет, а затем отобразить результат.
Вы можете вызвать функцию калькулятора (myCalculator), сохранить результат, а затем вызовите другую функцию (myDisplayer), чтобы отобразить результат:
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2) {
let sum = num1 + num2;
return sum;
}
let result = myCalculator(5, 5);
myDisplayer(result);Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>Function Sequence</h2>
<p>JavaScript functions are executed in the sequence they are called.</p>
<p>The result of the calculation is:</p>
<p id="demo"></p>
<script>
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2) {
let sum = num1 + num2;
return sum;
}
let result = myCalculator(5, 5);
myDisplayer(result);
</script>
</body>
</html>
Или вы можете вызвать функцию калькулятора (myCalculator), и позвольте функции калькулятора вызвать функцию отображения (myDisplayer):
function myDisplayer(some) {
document.getElementById("demo").innerHTML
= some;
}
function myCalculator(num1, num2) {
let sum = num1 + num2;
myDisplayer(sum);
}
myCalculator(5, 5);Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>Function Sequence</h2>
<p>JavaScript functions are executed in the sequence they are called.</p>
<p>The result of the calculation is:</p>
<p id="demo"></p>
<script>
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2) {
let sum = num1 + num2;
myDisplayer(sum);
}
myCalculator(5, 5);
</script>
</body>
</html>
Проблема с первым примером выше заключается в том, что вам нужно вызвать две функции для отображения результата.
Проблема со вторым примером заключается в том, что вы не можете запретить функции калькулятора отображение результата.
Теперь пришло время вызвать обратный вызов.
Обратный вызов — это функция, передаваемая в качестве аргумента другой функции.
Используя обратный вызов, вы можете вызвать функцию калькулятора (myCalculator). с обратным вызовом (myCallback) и позвольте функции калькулятора выполнить обратный вызов после завершения расчета:
function myDisplayer(some) {
document.getElementById("demo").innerHTML
= some;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(5, 5, myDisplayer);Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>Callback Functions</h2>
<p>The result of the calculation is:</p>
<p id="demo"></p>
<script>
function myDisplayer(something) {
document.getElementById("demo").innerHTML = something;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(5, 5, myDisplayer);
</script>
</body>
</html>
В приведенном выше примере myDisplayer является функцией обратного вызова.
Он передается в myCalculator() как аргумент.
Когда вы передаете функцию в качестве аргумента, не забывайте использовать круглые скобки.
Справа: myCalculator(5, 5, myDisplayer);
Неверно: myCalculator(5, 5, myDisplayer());
// Create an Array
const myNumbers = [4, 1, -20, -7, 5, 9, -6];
// Call removeNeg with a callback
const posNumbers = removeNeg(myNumbers, (x) => x >= 0);
// Display Result
document.getElementById("demo").innerHTML = posNumbers;
// Keep only positive numbers
function removeNeg(numbers, callback) {
const myArray = [];
for (const x of numbers) {
if (callback(x)) {
myArray.push(x);
}
}
return myArray;
}Попробуйте сами →
<!DOCTYPE html>
<html>
<body style="text-align: right">
<h1>JavaScript Functions</h1>
<h2>Callback Functions</h2>
<p id="demo"></p>
<script>
// Create an Array
const myNumbers = [4, 1, -20, -7, 5, 9, -6];
// Call removeNeg with a Callback
const posNumbers = removeNeg(myNumbers, (x) => x >= 0);
// Display Result
document.getElementById("demo").innerHTML = posNumbers;
// Remove negative numbers
function removeNeg(numbers, callback) {
const myArray = [];
for (const x of numbers) {
if (callback(x)) {
myArray.push(x);
}
}
return myArray;
}
</script>
</body>
</html>
В приведенном выше примере (x) => x >= 0 — это функция обратного вызова.
Он передается в removeNeg() как аргумент.
Приведенные выше примеры не очень интересны.
Они упрощены, чтобы научить вас синтаксису обратного вызова.
Обратные вызовы действительно хороши в асинхронных функциях. где одна функция должна ждать другую функцию (например, ожидание загрузки файла).
Асинхронные функции рассматриваются в следующей главе.