Let us understand term Callback by an real-world example: Suppose, you are calling to your Girlfriend (If you have) and she is busy in another call then she send message to you : “I am busy right now, Call back you later.!!”. After completing her work, she calls you back and this is what call back in JavaScript as well.
让我们通过一个真实的例子来理解“ 回叫”一词:假设您正在呼叫女友(如果有的话),而她正忙于另一个呼叫,那么她会向您发送消息:“我现在很忙,请稍后再给您回叫。!!”。 完成工作后,她会回叫您,这也是JavaScript中的回叫。
In JavaScript, When a function is executing (Girlfriend is talking with someone) then after function execution is completed another function is started for execution this is call back function.
在JavaScript中,当一个函数正在执行(女朋友正在与某人交谈)时,在函数执行完成后,另一个函数将开始执行,这就是回调函数。
Now you are thinking that its depend upon when, where you are calling function and all function call is “Call-back function”.
现在您正在考虑它取决于何时,在何处调用函数,并且所有函数调用都是“回调函数”。
![Image for post](https://miro.medium.com/max/9999/1*1epK9_3Kv5vg66SR85qUeQ.png)
Here, printWorld() function is executed after printHello() complete its execution but this is not call-back function example because printHello() is not Asynchronous function. Suppose, printHello() prints after 1 Second then printWorld() executes first.
在这里, printWorld()函数是在printHello()完成执行之后执行的,但这不是回调函数示例,因为printHello()不是异步函数。 假设printHello()在1秒后打印,然后首先执行printWorld() 。
![Image for post](https://img-blog.csdnimg.cn/img_convert/c5720674878f034bfad06319de51fcda.png)
What if we want “Hello World” output when Asynchronous function is there. We can pass function as argument and calls it after printHello() complete its execution. Here below code snippet of how function pass as argument :
如果异步功能在那里,我们想要“ Hello World”输出怎么办? 我们可以将函数作为参数传递,并在printHello()完成执行后调用它。 下面是函数如何作为参数传递的代码片段:
![Image for post](https://miro.medium.com/max/9999/1*tgm2Yz6aFrUD-PKpcOyfiA.png)
Callback function can be defined as a function passed by argument and executes when one function completes its execution.
回调函数可以定义为参数传递的函数,并在一个函数完成执行时执行。
Suppose, If you have API (Application Programming Interface) to get Students Roll numbers and select one of Roll number — getting that roll number’s data and print that data. We don’t have API to get students data so we are using setTimeout() Async function and getting roll number after 2s, We are also selecting one of roll number manually after 2s and print Roll number’s data after 2s. This can be done by call back function.
假设,如果您具有API (应用程序编程接口)来获取学生卷号并选择卷号之一-获取该卷号的数据并打印该数据。 我们没有API来获取学生数据,因此我们使用setTimeout()异步函数并在2秒后获取卷号,我们也在2秒后手动选择卷号之一,并在2秒后打印卷号的数据。 这可以通过回调函数来完成。
![Image for post](https://img-blog.csdnimg.cn/img_convert/c8578745a0093ab1fe921b3e1d27f765.png)
The program became complex and complex if we have too many things to do like Getting Students data, Selecting one of them student, get student’s roll number and get result by roll number then it become very complex. If you have any Error in this then debugging is also tedious task, this things is called “Callback Hell”, which is shape like “Pyramid Of Doom”.
如果我们有太多事情要做,例如获取学生数据,选择其中一个学生,获取学生的卷号并按卷号获取结果,该程序将变得非常复杂。 如果您在此过程中遇到任何错误,那么调试也是一项繁琐的任务,此事情称为“回调地狱”,其形状类似于“末日金字塔”。
To overcome with this problem, Promises is introduced in JavaScript. Promises has three states : Pending, Resolved, Reject. Promises is created by Constructor : new Promise(). It has one executor function which has two arguments (resolve, reject).
为了克服这个问题,JavaScript中引入了Promises 。 承诺具有三个状态:待定,已解决,拒绝。 Promises由Constructor创建: new Promise() 。 它具有一个执行程序函数,该函数具有两个参数(解析,拒绝)。
Promise object has three methods: then(), catch() & finally().
Promise对象具有三种方法:then(),catch()和finally()。
![Image for post](https://img-blog.csdnimg.cn/img_convert/56d307a13569fbcf9f959565ffb5cb15.png)
If Promise is successfully executed then its data is transferred through resolve function and if it has error then passed through reject function.
如果Promise成功执行,则其数据通过resolve函数传输,如果有错误,则通过拒绝函数传递。
We have implemented same task which is done using call back function in Promises and its easily understandable However it is complicated compare to callback function but when you use promises for sometimes then it’s easy to implement.
我们已经在Promises中实现了使用回调函数完成的相同任务,并且它易于理解。但是与回调函数相比,它很复杂,但是当您有时使用promises时,它很容易实现。
In getRollNumber(), resolve method’s data is caught by then() functions arguments and reject method’s data is caught by catch() function. Here In Promises, Every task has different promises because of that it is easy to debug and readable compare to call back function. You can see that there is no shape like “Pyramid of Doom” in Promises. This is how Callback function is replaced by Promises.
在getRollNumber()中, resolve方法的数据由then()函数参数捕获,而拒绝方法的数据由catch()函数捕获 。 在Promises中,每个任务都有不同的承诺,因为与回调函数相比,它易于调试且可读性强。 您可以看到在Promises中没有像“厄运金字塔”这样的形状。 这就是用Promises代替Callback函数的方式。