Write an event queue operator in js _ javascript skills

Asynchronous operations may generate events that you do not want to trigger. This problem has also been encountered before. At that time, I didn't think too much about it, that is, to solve it by directly embedding multiple layers (nesting the next event after ajax returns. I saw this series of articles on the internet two days ago, "Write a JavaScript asynchronous call framework 1, 2, 3, 4, 5, 6".

Asynchronous operations may generate events that you do not want to trigger. This problem has also been encountered before. At that time, I didn't think too much about it, that is, to solve it by directly embedding multiple layers (nesting the next event after ajax returns.

I read it carefully. I was dizzy and had to say that I may not have a good foundation or a good grasp of the overall situation. D. I think it is difficult to understand it, and I don't think it is convenient to call it.

If so, call:

Var chain = Async. go (0 );
Chain
. Next (function () {setTimeout ("alert (1)", 3000 )})
. Next (function () {setTimeout ("alert (2)", 3000 )})
. Next (function () {setTimeout ("alert (3)", 3000 )});

I think this is perfect. But in fact, if it is an asynchronous call, it is like this:

Var chain = Async. go (0 );
Chain. next (function (){
Var operation = new Async. Operation ();
SetTimeout (function () {operation. yield ("hello") ;},3000 );
Return operation;
});

Of course, the last article mentioned how to encapsulate it again. I want to solve this inconvenient call in general.



In fact, I used to have this idea before, that is, to find a class or something that can be triggered in my order. When the Group asks if there is such a category, other people always reply, just execute in onreadychange, and even laugh! In addition, it was just a novice cainiao. Although I am still a cainiao, I have been flying for a while. Try to write an event queue according to your own understanding.

I am always used to reading the code, so I should first go to the code and then talk about the idea:

The Code is as follows:

/**
KEQueue -- Events Queue
@ Author ake by 2010-04-25
Http://www.cnblogs.com/akecn

@ Param data each event in the event queue will pass this parameter as the first parameter unless it is modified through KEQueue. status.
@ Method next (Function) the next event to be executed.
@ Method wait (Number) wait for a certain amount of time before executing the next event.
@ Method sleep () stops the execution of the event sequence.
@ Method wake () continues to execute the event sequence.
**/
Var KEQueue = function (data ){
This. staticQueue = [];
This. asyncQueue = [];
This. status = "running ";
This. result = data;
Return this;
}
KEQueue. prototype = {
Next: function (callback, async) {// Add a method
If (!! Async ){
This. staticQueue. push ("async"); // if it is an Asynchronous Method (a method with a latency effect), add the identifier.
This. asyncQueue. push (callback); // The storage array of the latency Method
} Else {
This. staticQueue. push (callback); // storage array of directly triggered Methods
}
Return this;
},
Wait: function (delay) {// delayed execution sequence
Var self = this;
This. next (function () {// simulate adding a latency Method
SetTimeout (function (){
Self. wake. call (self)
}, Delay );
}, True );
Return this;
},
Go: function () {// execute the event in sequence according to the order in which the event is added
If (this. staticQueue. length = 0) return;

While (this. staticQueue. length> 0 ){
If (this. status = "sleep") return;

Var fun = this. staticQueue. shift ();
If (typeof fun = "string" & fun = "async "){
Fun = this. asyncQueue. shift ();
Fun (this. result );
This. sleep ();
} Else {
Fun (this. result );
}
}
},
Sleep: function (){
This. status = "sleep ";
},
Wake: function (){
This. status = "running ";
This. go ();
}
}

It is estimated that you have understood how the code is done, and the code is also very simple.

In fact, it is loop to execute the method in an array. If the function is not stored in the array, stop the queue operation until it is woken up (wake ()). The usage is also more inclined to my favorite method.

Of course, I may only see that the event is executed in the order I added, but there are many other situations or reasons I did not expect. If you have any suggestions or comments, please leave a message!

The following is an example.

The Code is as follows:

// Example 1 add an event and execute an event queue
Function show (n ){
Console. log (n );
}
Var o = new KEQueue ("0 ");
O. next (function (d) {// The parameter is the data passed during the construction. The data is returned as a parameter in the entire event queue.
Show (d + 1 );
}). Next (function (d ){
SetTimeout (function () {// simulate a delayed operation (Asynchronous Operation)
Show (d + 2 );
O. result = 0; // change the data to be transmitted. If no modification is made, the data will be consistently transmitted to the last event.
O. wake (); // manually wake up the sequence
},2000 );
}, True). next (function (d ){
Show (d + 3 );
}). Go ();

O. next (function (d ){
SetTimeout (function () {show (d + 4); o. wake () ;}, 1000 );
}, True). wait (1000) // manually delay 1 second to execute the following method
. Next (function (d ){
Show (d + 5 );
}). Go ();

// Example 2
O. next (function (){
Show (1 );
})
SetTimeout (function (){
O. next (function (){
SetTimeout (function (){
Show (2 );
O. wake ();
}, 2000)
}, True). go ();
},1000 );
SetTimeout (function (){
O. next (function (){
Show (3 );
}). Go ();
},2000 );

PS: when I go to bed at night, I suddenly want to say that if a complicated event is added, it will take a long time to consume. Will this cause an unexpected event order? In this case, each event must be displayed as an asynchronous event for processing, so this queue is meaningless. At most, it is to help you sort out the event order ..

On the way to the company in the morning, I suddenly remembered that JavaScript is a single-thread operation, and events will be blocked. If it is multi-thread, it is estimated that such a queue is not required.

I just wrote a demo and tried it. Well, it seems that there is still no problem.