Callback mechanism 2

PS: I recently read some things for the interview. I 've sorted out some things and posted them for sharing. I hope you can give me some comments.

***************************

The callback mechanism in JS, that is, callback, can be understood in this image. If a button exists here, we can add an action. If this button is triggered, this action will be called. This is actually a callback mechanism. A button is like an event listener and an event source. Action is an action.

Summary JS is often used in the following areas:

1. When loading (external) JS dynamically, perform some operations after loading. You can use callback to learn more: how to determine whether script loading is complete and how to implement JavaScript callback

2. Similarly, you can use callback to perform some operations when loading IFRAME. For more information, see: the perfect way to determine whether IFRAME is loaded.

3. Ajax is used. The returned values obtained after the request is submitted are parsed and used by the callback mechanism. It seems that most frameworks currently use this method.

3. During a chained call, it is easy to implement chained call in the method (or method without return values) of the value assignment tool, while the value assignment tool is relatively difficult to implement chained call, because you need the valuer to return the data you need instead of the this pointer. If you want to implement the chained method, you can use the callback function. You can refer to the example later in the article.

4. setTimeout and setinterval functions call to obtain their return values. Because both functions are asynchronous, their call sequence is relatively independent of the main process of the program, so there is no way to wait for their return values in the subject. When they are opened, the program will not stop and wait. Otherwise, the meaning of setTimeout and setinterval will be lost. Therefore, using return is meaningless, you can only use callback.

5. The latency of setTimeout is 0. This hack is often used. The setTimeout function is actually a callback. To learn about this hack of setTimeout, if you are interested, read realazy's article: recognize the setTimeout with a delay of 0.

6. The callback mechanism is often used in event processing. In the previous example, the button is actually reflected.

7. Others that need some additional processing after processing (this is more generic, O (∩) O ~)

These are a small summary I have made. You are welcome to give your comments and more ideas!

 

Appendix: design a simple class that supports chained calls:

JS Code

1. Function dog (name, color ){
2. This. Name = Name | "";
3. This. Color = color | "";
4. }
5. Dog. Prototype. setname = function (name ){
6. This. Name = Name;
7. Return this;
8. };
9. Dog. Prototype. setcolor (color ){
10. This. Color = color;
11. Return this;
12. };
13. Dog. Prototype. Yelp (){
14. Alert ("My name is:" + this. Name + ", my color is:" + this. Color );
15. Return this;
16. };

Function dog (name, color) {This. name = Name | ""; this. color = color | "";} dog. prototype. setname = function (name) {This. name = Name; return this;}; dog. prototype. setcolor (color) {This. color = color; return this ;}; dog. prototype. yelp () {alert ("My name is:" + this. name + ", my color is:" + this. color); return this ;};

 

Usage:

JS Code

1. VaR dog = new dog ();
2. Dog. setname ("wangcai"). setcolor ("white"). Yelp ();

VaR dog = new dog (); dog. setname ("wangcai"). setcolor ("white"). Yelp ();

 

If you want to support chained call, too? The callback function is used to implement this function, and the value that should have been returned is directly transmitted to the callback function, while return still returns the this pointer. Then, write a method for the above Dog class:

JS Code

1. Dog. Prototype. getname (callback ){
2. Callback. Call (this, this. Name );
3. Return this;
4. }

Dog. Prototype. getname (callback) {callback. Call (this, this. Name); return this ;}

 

Usage:

JS Code

1. Function showname (name ){
2. Alert (name );
3. }
4. Dog. setname ("wangcai"). getname (showname). setcolor ("white ");

Function showname (name) {alert (name);} dog. setname ("wangcai"). getname (showname). setcolor ("white ");