The understanding and use of JavaScript callback function

Source: Internet
Author: User
Tags call back

Recently done a project to use the callback function, so study the next summary of my understanding of JavaScript callback first from the callback literal translation "callback" can understand that this is a function called mechanism

When we meet a noun first may be Baidu Google search to see how the official explanation
Here's what Wikipedia defines for callbacks:

A callback is a piece of executable code, is passed as an argument to other code which are expected to call back (Execu TE) The argument at some convenient time
Hard translation: A callback function is an executable code snippet that acts as an argument to another function. This code snippet executes at a convenient time
Popular image explanation: The function F2 as a parameter to the function F1 and in F1 the appropriate time to execute F2 (all the examples below I use F1,F2)

So we can get a callback function pattern like this.

function F1 (F2) {    //F1 some code to execute    iftypeof//  The F2 is judged whether it exists and is a function         f2 ();}    }

Note here that the F2 in the two-point parameter is a pointer to the F2 function, so F2 cannot be appended with parentheses.
And F1 inside the F2 to have parentheses because then we want to invoke execution F2, so write F2 ()

We instantiate this pattern and look at the results of his execution.

declaring functions function F1 (F2) {    alert ("I am F1");     if typeof // It's a good habit to write judgment.         f2 ()}    } execution f1 (function() {    alert ("I am F2");}) Result://"I am F1", "I am F2"

We look at the whole process of executing the function when calling F1 (function () {alert ("I am F2");}) The time
First, an anonymous function is passed to F1 () and this anonymous function is the parameter in the declaration function F2 JavaScript program executes the alert from top to bottom ("I am F1"); Then executed the F2 ();

So, can we just write that?

function F1 (F2) {    alert ("I am F1");     if typeof (F2) = = = "function") {          F2 ()    }    alert ("I'm F1 haha");}
Execute F1 (function() {    alert ("I am F2");}) // Result: I am F1, I am F2, I am 1 haha

Looking again at the definition of callback, we can let callback execute at the time we want to execute, without affecting the execution flow of F1 itself.

But for the sake of encapsulation and aesthetics most of us will write this

function F1 (F2) {         iftypeof(F2) = = = "function") {          settimeOut (function() {F2 ()},1000); // f1 execution after 1s f2 execution     }}function  f2 () {    /**/}f1 (F2);

  

We usually use the callback.

Like an example in jquery.

$ ("#div1"). FadeOut ("Fast", Functin () {    $ ("#div2"). FadeIn ("slow");})

Let #div quickly hide and let #div2 gradually show that there are a lot of callback functions in jquery.

And there's a special one that has a way callbacks to manage

function (options) {...}

Finally, the callback I used most in the project.
The Hybrid app feature is probably the JSON data I sent to iOS to request iOS back to me and then I insert the returned data resolution into the Web page

//First I write a JavaScript and iOS communication callback function (Simplified)GetData (callback) {SettimeOut (function() {callback (Iso_return)},100);}//then I send a request to iOSfunctiongetsinersreuest () {window.location.href= "Vvmusic://....callback=getsinersdata"}/*then iOS intercepts callback execution GetData (getsinersdata) in the URL to return to my data; Getsinersdata is to insert the JSON returned by iOS into the page display*/Getsinersdata (Iso_return) {...}//called when the page loadsWindow.onload=function() {getsinersreuest ();}

Understanding and use of JavaScript callback functions

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.