В этом руководстве вы узнаете о функциях обратного вызова JavaScript с помощью примеров.
Функция - это блок кода, который при вызове выполняет определенную задачу. Например,
// function function greet(name) ( console.log('Hi' + ' ' + name); ) greet('Peter'); // Hi Peter
В приведенной выше программе строковое значение передается в качестве аргумента greet()функции.
В JavaScript вы также можете передать функцию в качестве аргумента функции. Эта функция, которая передается в качестве аргумента внутри другой функции, называется функцией обратного вызова. Например,
// function function greet(name, callback) ( console.log('Hi' + ' ' + name); callback(); ) // callback function function callMe() ( console.log('I am callback function'); ) // passing function as an argument greet('Peter', callMe);
Вывод
Привет, Питер, я - функция обратного вызова
В приведенной выше программе есть две функции. При вызове greet()функции передаются два аргумента (строковое значение и функция).
callMe()Функция является функцией обратного вызова.
Преимущество функции обратного вызова
Преимущество использования функции обратного вызова заключается в том, что вы можете дождаться результата предыдущего вызова функции, а затем выполнить другой вызов функции.
В этом примере мы собираемся использовать этот setTimeout()метод для имитации программы, выполнение которой требует времени, например данных, поступающих с сервера.
Пример: программа с setTimeout ()
// program that shows the delay in execution function greet() ( console.log('Hello world'); ) function sayName(name) ( console.log('Hello' + ' ' + name); ) // calling the function setTimeout(greet, 2000); sayName('John');
Вывод
Привет, Джон, привет, мир
Как известно, метод setTimeout () выполняет блок кода по истечении заданного времени.
Здесь greet()функция вызывается через 2000 миллисекунд ( 2 секунды). Во время этого ожидания sayName('John');выполняется. Вот почему Hello John печатается перед Hello world.
Приведенный выше код выполняется асинхронно (вторая функция; sayName()не ожидает завершения первой функции greet()).
Пример: использование функции обратного вызова
В приведенном выше примере вторая функция не ждет завершения первой функции. Однако, если вы хотите дождаться результата предыдущего вызова функции до выполнения следующего оператора, вы можете использовать функцию обратного вызова. Например,
// Callback Function Example function greet(name, myFunction) ( console.log('Hello world'); // callback function // executed only after the greet() is executed myFunction(name); ) // callback function function sayName(name) ( console.log('Hello' + ' ' + name); ) // calling the function after 2 seconds setTimeout(greet, 2000, 'John', sayName);
Вывод
Привет, мир, привет, Джон
В приведенной выше программе код выполняется синхронно. sayName()Функция передается в качестве аргумента greet()функции.
setTimeout()Метод выполняет greet()функцию только после того, как 2 секунд. Однако sayName()функция ожидает выполнения greet()функции.
Примечание . Функция обратного вызова полезна, когда вам нужно дождаться результата, который требует времени. Например, данные поступают с сервера, поскольку для их доставки требуется время.
