Почему нам нужна функция CallBack в Js Почему мы не просто вызываем функцию в главной функции? - PullRequest
Новая
       7

Почему нам нужна функция CallBack в Js Почему мы не просто вызываем функцию в главной функции?

0 голосов
/ 19 апреля 2020

Почему мы не вызываем другую функцию через функцию обратного вызова 

function serverRequest(query, callback){
  setTimeout(function(){
    var response = query + "full!";
    callback(response);
  },5000);
}

function getResults(results){
  console.log("Response from the server: " + results);
}

serverRequest("The glass is half ", getResults);

Что-то вроде этого 

function serverRequest(query){
  setTimeout(function(){
    var response = query + "full!";
    getResults(response);
  },5000);
}     
serverRequest("The glass is half");

Ответы [ 3 ]

2 голосов
/ 19 апреля 2020

Основными задачами обратных вызовов является достижение асинхронного программирования.

Обратные вызовы более полезны, когда вы хотите представить асинхронный API-интерфейс или написать асинхронный код, обеспечивающий разделение задач и возможность повторного использования.

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

вы бы дали функцию, подобную следующей: 

import MyCoolTweeningEngine from "lib/MyCoolTweeningEngine"

function animate(elem, props, callback) {
   MyCoolTweeningEngine(elem, props)
     .then((res) => res.json())
     .then(() => callback())
}

и люди собираются используйте ваш инструмент следующим образом: 

animate(
  ".my-animated-element",
  { x: 100, scale: 1 },
  function () => console.log("animation finished"))

Обратные вызовы были очень распространены до появления Promises, теперь с Promises мы можем написать относительно более чистый код: 

const res = await animate(".my-elem", { scale: 1 });
console.log("animation finished")

в вашем случае вы можете сделать это для более чистого и многократно используемого кода: 

import serverRequest from "../my-awesome-utils/serverRequest"


serverRequest("The glass is half ", function getResults(results){
  console.log("Response from the server: " + results);
});
0 голосов
/ 20 апреля 2020

Но мой вопрос был в том, что использовать обратный вызов, если мы можем просто вызвать эту функцию без использования обратного вызова. Так что я на самом деле получаю ответ после прочтения множества статей обратных вызовов, асинхронных, синхронных и т. Д. c ..

Варианты использования Callback - 

function add(a,b){
    return a+b;
}

function multiply(a,b){
    return a*b;
}

function remainder(a,b){
    return a%b;
}

function doSomething(a,b,callback){
    return callback(a,b);
}

doSomething(3,2,add)
// 5
doSomething(3,2,multiply)
// 6
doSomething(3,2,remainder)
// 1
0 голосов
/ 19 апреля 2020

В вашем примере вы можете назвать его прямым, потому что ваши функции getResults и serverRequest находятся в одной области и имеют прямой доступ друг к другу.

, но бывают ситуации, когда вам нужно использовать обратный вызов, например: 

const arr = [1, 2, 3, 4, 5, 6];

const MyCallback = (item) => {
  return item === 2;
};

arr.filter(MyCallback);

function filter в другой области видимости, и она ничего не знает о вашей MyCallback функции, кроме нее ожидает обратного вызова в качестве реквизита и применяет его к каждому элементу вашего массива, чтобы проверить, какой элемент вернет true

...